<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来同步。