vue组件-props

props

只可读

sync

第一种方式：由于 props只具有可读性，不能在当前组件中修改props,要想实现组件中props数据的更新，需要使用this.$emit来更新父组件的数据，从而改变子组件的显示数据。

 <cardCustomRightsDialog :visible.sync="showDialog" v-bind.sync="myObject[0]">

子组件

 <el-input :value="crightName" size="small" @input="$emit('update:crightName',$event)"></el-input>

Data derived from prop

第二种方式是，父组件通过props往子组件传入数据，在子组件中进行拷贝一份，然后更新拷贝的值，再将该拷贝的对象返回给父组件，也就是产生一个新的对象。（也就是说data derived from prop）

export default {
   
  props: {
   
    day_exr: {
   
      type: Object,
      required: true
    }
  },

  data: function () {
   
    return {
   
      id: this.day_exr.id,
      weight: this.day_exr.weight,
      auto_weight: Boolean(this.day_exr.auto_weight),
      auto_reps: Boolean(this.day_exr.auto_reps),
      day_id: this.day_exr.day_id,
      exercise_id: this.day_exr.exercise_id.toString(),
      increment: this.day_exr.increment,

上面这样写很乱 jsfiddle: 其中的一个灵感

编写组件

包邮组件

vue,父组件