vue 自定义v-model 内外同步数据

<abc v-model="modelData">

<script>
export default {
  model: {
    prop: 'payload', // 这里的prop随便取，外面根本用不到，只是内部标识
    event: 'change'
  },
  props:{
    payload:{ // 这个跟上面的model的prop一致
      type: [ String, Number, Object, Array ], // v-model="" 传值允许的类型
      default:'',
    },
  },
  data(){
    return {
      modelData: this.payload, // 初始化时候内部的值需要接受外部的
    }
  },
  watch:{
    payload(val){
      this.modelData = val; // v-model 传值变化需要同步更新内部
    },
    modelData(val){
      this.$emit('change', val); // 内部的值变化需要同步变化外部
    }
  },
}
</script>

如果内部abc组件不定义modelData转接下，直接使用payload也可以，但是内部操作变化会经过报错，不允许修改prop
使用v-model属性来传，是符合vue自身语法，不喜欢可以直接用attr.sync来同步。