一、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值作为参数传递给父组件，从而更新父组件中的数据。
