vue自定义组件实现v-model双向数据绑定

一、Vue2 实现自定义组件双向数据绑定

① v-model 实现双向数据绑定

  在vue2中，子组件上使用v-model的值默认绑定到子组件的props.value属性上，由于子组件不能改变父组件传来的属性，所以需要通过$emit触发事件使得父组件中数据的变化，然后再同步到子组件。vue2默认触发v-model数据变化的事件为input。

使用如下：

子组件MySon

​

如果希望改变接收v-model的属性或改变触发v-model数据变化的事件，可通过model:{}配置实现，如：

​

父组件

​

② .sync 实现子组件多个数据双向绑定

在Vue2中使用v-model只能使用一次，如果要实现多个双向数据绑定，可以借助.sync修饰，使用语法为 :属性.sync="数据" ，用这种绑定代替v-model，触发数据改变的事件为update:属性名

使用如下：

子组件

​

父组件

​

至于为什么子组件要通过$emit('update:属性名', 数据)；来触发父组件数据变化，原因如下：

          ||
          \/
        等价于

二、Vue3 实现双向数据绑定

在Vue3中，v-model可以实现多个数据双向数据绑定，同时.sync修饰符已经不再生效。

① v-model 实现双向数据绑定

vue3中子组件上使用v-model绑定的数据默认传到子组件的props.modelValue属性上（vue2是props.value属性），并且默认触发数据变化的事件为update:modelValue （vue2为input）

使用如下：

子组件

父组件

​

② v-model: 属性 实现多个数据双向绑定

数据绑定语法：v-model:属性="数据"

触发数据变化的事件：update:属性

使用如下：

子组件

​

父组件