一、v-model指令
当在Vue 2中实现父子组件的双向数据绑定时，主要涉及以下几个步骤：
在父组件中定义要传递给子组件的数据，并使用v-model指令将数据传递给子组件。
在子组件中声明一个props接收来自父组件的数据，并在子组件内部使用该数据。
在子组件中，通过监听子组件内部数据的变化，并使用$emit方法向父组件发送一个自定义事件。
在父组件中通过v-on或@监听子组件发出的自定义事件，并在相应事件处理程序中更新父组件中的数据。
ChildComponent.vue- 子组件
<template><div><h3>Child Component</h3><!-- 直接使用props中的value来进行数据双向绑定 --><input v-model="childMessage" /></div></template><script>export default {// 声明props来接收来自父组件的value数据props: ['value'],data() {return {childMessage: this.value, // 使用value数据来初始化子组件内部的childMessage};},watch: {childMessage(newValue) {// 监听子组件内部数据的变化，并通过$emit方法向父组件发送一个名为'input'的自定义事件// 并传递当前子组件内部的childMessage数据作为参数this.$emit('input', newValue);},},};</script></script>
ParentComponent.vue- 父组件
<template><div><h2>Parent Component</h2><!-- 使用v-model将messageFromChild数据传递给ChildComponent --><ChildComponent v-model="messageFromChild" /><p>Message from Child: {{ messageFromChild }}</p></div></template><script>import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {messageFromChild: '', // 定义要传递给子组件的数据};},};</script>
父组件中使用v-model指令将messageFromChild数据传递给子组件，而子组件通过props接收父组件传递的value，并通过v-model指令将其与子组件内部的childMessage数据建立双向绑定。当子组件中的输入发生变化时，watch会监听到变化并自动触发$emit('input', newValue)来更新父组件中的messageFromChild数据。
二、使用sync修饰符
Vue 2提供了sync修饰符，它可以简化父子组件之间的双向绑定。使用sync修饰符时，父组件可以通过一个修饰符来传递一个带有.sync后缀的属性给子组件，然后子组件可以直接通过更新该属性来实现双向绑定。
ChildComponent.vue- 子组件
<template><div><h3>Child Component</h3><!-- 直接使用props中的value来进行数据双向绑定 --><input v-model="childMessage" /></div></template><script>export default {// 声明props来接收来自父组件的value数据props: ['childMessage'],methods: {// 使用.sync简写直接更新父组件的属性updateParentMessage(newValue) {this.$emit('update:childMessage', newValue);},},};</script>
ParentComponent.vue- 父组件
<template><div><h2>Parent Component</h2><!-- 使用.sync简写将messageFromChild数据传递给ChildComponent --><ChildComponent :childMessage.sync="messageFromChild" /><p>Message from Child: {{ messageFromChild }}</p></div></template><script>import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {messageFromChild: '',};},};</script>
父组件中使用:childMessage.sync来传递messageFromChild给子组件，并在子组件中直接使用props中的childMessage来建立双向绑定。子组件中使用updateParentMessage方法来触发一个名为'update:childMessage'的自定义事件，并将新的childMessage值作为参数传递给父组件，从而更新父组件中的数据。
