Vue2在子组件上使用v-model实现数据的双向绑定、.sync修饰符

1、v-model

先看示例：

//父组件<template><ChildComponent v-model="parentData" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentData: '' // 初始值}}
}
</script>

如上，在父组件中，使用v-model给子组件传递一个值，实现的数据的双向绑定。实际上呢，原理是在子组件上定义了一个自定义事件@input，并且给子组件传递了一个value值。

以上代码其实等同于：

<template><ChildComponent :value="parentData" @input="handleInput" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentData: '' // 初始值}},methods:{handleInput(val){this.parentData=val;}}
}
</script>

在子组件中，你要通过props接收父组件传过来的value的值，然后呢，当接收到的value的值发生改变的时候，通过$emit触发自定义事件‘input’,将新值传给父组件，以便父组件中改变相应的值。

如下：

export default {props: ['value'],methods: {updateValue(newVal) {this.$emit('input', newVal)}}
}

2、.sync修饰符

看示例：

<!-- 父组件 -->
<Child :title.sync="parentTitle" />

等价于

<Child :title="parentTitle" @update:title="parentTitle = $event" />

典型使用场景：

1. ‌表单组件封装‌
   实现输入控件值与父组件数据的实时同步。

   <!-- 父组件 -->
   <CustomInput :value.sync="inputValue" /><!-- 子组件 CustomInput -->
   <input :value="value" @input="$emit('update:value', $event.target.value)">
   

2. ‌多属性同步‌
   通过对象语法批量绑定多个 prop：

   <ChildComponent v-bind.sync="doc" />  <!-- 自动绑定 doc 对象的每个属性 -->
   

   示例：

v-model和.sync修饰符都是实现数据双向绑定的方案，他们诞生的目的都是为了简化代码的书写。