Vue自定义组件v-model

关于Vue.js中在自定义组件中使用 v-model 进行双向绑定的最佳实践

Vue自定义组件使用v-model

○实现代码

<script>
export default {
    data() {
        return {
            myData: this.modelValue
        }
    },
    props: ['modelValue'],
    watch: {
        myData: (newVal, oldVal) => {
            this.$emit('update:modelValue',newVal);
        }
    }
}
</script>

○简单解释

1. Vue.js 要求组件的props内的属性为单向数据流，即父组件对props内的数据修改后，组件内的prop也会响应改变，但是不允许组件直接对prop进行修改或作为组件内另一子组件的v-model。

   错误示范：

   <template>
   <!--报错！！-->
   <input v-model="propData" />
   </template>
   <script>
   export default {
       props:['propData'],
       method: {
           myFunc() {
               //报错！！
               this.propData = 'anyData'
           }
       }
   }
   </script>

2. Vue.js中自定义组件的v-model将会解析成:value="data"和@update:model-value="data=$event"，所以自定义组件必须要有名为value的props，并在需要改变时使用$emit调用update:modelValue方法。

○问题补充

前一段时间自定义组件时突然发现父组件更新子组件不更新的情况，加上反向监听后得以解决。

watch: {
    myData: (newVal, oldVal) => {
        this.$emit('update:modelValue',newVal);
    },
    modelValue(newVal,oldVal)=>{
        this.myData = newVal;
    }
}