在vue自定义组件上使用v-model

应用背景：在引用的组件上使用v-model

我们都知道vue2.0之后，子组件不允许修改父组件传递的数据（prop）

很多同学第一个想到的是这样实现

使用$emit()在子组件中发布一个方法并将子组件的值作为参数，在父组件订阅此方法，获取子组件传递过来的值，从而实现双向绑定

在页面中引用组件

<plateBox  v-model="isFocus" />

定义plateBox组件

name: 'plate-box',
data () {
    return {
      isFocus: false
    };
  },
props: {
    value: Number
},
watch: {
    value: {
      handler (newB, oldB) {
        this.isFocus = newB;
      },
      immediate: true // 立即执行
    },
    isFocus: {
      handler (newB, oldB) {
        this.$emit('input', newB);
      }
    }
  }

在组件上使用v-model就相当于

<plateBox  :value="isFocus" @input="isFocus = $event"/>

为了避免冲突，可以在组件中定义props 和 event

name: 'plate-box',
data () {
    return {
      isFocus: false
    };
  },
model: {
    prop: 'isBool',
    event: 'changeValue'
},
props: {
    isBool: Number
},
watch: {
    isBool: {
      handler (newB, oldB) {
        this.isFocus = newB;
      },
      immediate: true // 立即执行
    },
    isFocus: {
      handler (newB, oldB) {
        this.$emit('changeValue', newB);
      }
    }
  }