props のバックアップ(No.4)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• +Vue+props へ行く。
  • 1 (2022-05-11 (水) 20:18:24)
  • 2 (2022-05-11 (水) 20:20:12)
  • 3 (2022-05-12 (木) 09:37:10)
  • 4 (2022-05-12 (木) 17:13:10)
  • 5 (2022-05-13 (金) 10:24:46)
  • 6 (2022-05-13 (金) 13:40:22)
  • 7 (2022-09-03 (土) 10:12:48)

Vue

※前提条件：本情報はVue 2.0を基づいて説明してる

概要 †[edit]

props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props（父组件不需要）：

Vue.component('child', {
 // 声明 props
 props: ['msg'],
 // prop 可以用在模板内
 // 可以用 `this.msg` 设置
 template: '<span>{{ msg }}</span>'
})

props在接收数据的同时，对数据进行了类型限制+默认值的指定+必要性的限制

• 类型属性：type:xx
• 必传属性：required：true
• 默认属性：default：xx

props是只读的，vue底层会检测你对props的修改，如果进行了修改，控制台会报错，必须修改，就复制一份到data中，通过data去修改数据。

props:{
    "name":{
        type:String,
        required:true
    },
    "age":{
        type:Number,
        default:18
    },
    "sex":{
        type:String,
        default:'男'
    },
},

type

• Number
• String
• Object
• Boolean

应用场景 †[edit]

第二次打开Dialog才能接收到值 †[edit]

问题描述 †[edit]

父控件绑定动态值到Dialog，Dialog第一次展示未能接收到值，第二次打开Dialog才能接收到值。

解决方案 †[edit]

针对不需要动态更新的数据，可采用将绑定值设置为props。并且 default 必须设置

 props: {
    formData: {
      type: Object,
      default: null,
    }
  },

The data property "value" is already declared as a prop. Use prop default value instead †[edit]

需要吧子组件接收的的参数变为本地数据。

// 将 prop 数据转换为本地数据
computed: {
  initData: function () {
    return this.fList = this.list;
    //如果子组件接收的是对象或者数组数据，或者说对象里面会有数组数据，因为在我操作过程中打印上面那个本地数据打印出来的是一个数组形式的object，
    //后来发现了问题，需要对本地数据还要进行一个转化。
    //利用 JSON.stringify 和 JSON.parse() 来进行隔离,相当于深度copy。
    return this.fList = JSON.parse(JSON.stringify(this.list));
  }
}

コメント：

お名前:

(画像の文字列を入力して下さい)