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" />
典型使用场景：
-
表单组件封装
实现输入控件值与父组件数据的实时同步。<!-- 父组件 --> <CustomInput :value.sync="inputValue" /><!-- 子组件 CustomInput --> <input :value="value" @input="$emit('update:value', $event.target.value)"> -
多属性同步
通过对象语法批量绑定多个 prop：<ChildComponent v-bind.sync="doc" /> <!-- 自动绑定 doc 对象的每个属性 -->示例：
v-model和.sync修饰符都是实现数据双向绑定的方案，他们诞生的目的都是为了简化代码的书写。