1. 父子组件通讯
在Vue中，一个应用通常由多个组件构成。组件是Vue中概念的核心，它使得我们可以划分一个大应用到若干个小组件。然而，一些情况下，组件之间需要进行通讯，使得它们能够共享信息或者互相协作完成任务。
父子组件通讯是其中一个最常见的通讯方式。在Vue中，我们可以通过向子组件传递数据、子组件向父组件派发事件等方式实现父子组件之间的通讯。
2. $parent 和 $children
Vue提供了两个实例属性$parent和$children来帮助我们访问组件实例的父组件和子组件。
// 获取父组件实例
this.$parent
// 获取子组件实例
this.$children
需要注意的是，$parent和$children都是“非响应式”的。也就是说，当你从一个组件内获取这两个属性的值时，这些属性的值是在组件被创建后就已经确定的，不会发生改变。
例子：我们创建一个父组件ParentComponent和一个子组件ChildComponent，在ParentComponent中向ChildComponent传递一个字符串类型的prop属性，并在ChildComponent中通过$parent属性获取父组件实例并访问父组件中的数据。
// 父组件
Vue.component('parent-component',{
template: '<div><child-component :prop="message"></child-component></div>',
data() {
return {
message: 'Hello from parent component!'
}
},
mounted() {
console.log(this.$children[0].$parent.message); // 输出："Hello from parent component!"
}
});
// 子组件
Vue.component('child-component', {
props: ['prop'],
mounted() {
console.log(this.prop); // 输出："Hello from parent component!"
}
});
3. 父组件向子组件派发事件
当我们需要在父组件中改变子组件的状态时，我们可以借助子组件中的自定义事件。在Vue中，我们使用$emit方法来触发自定义事件，使用$on方法来监听自定义事件。在子组件中监听这个事件并在触发时执行相应的方法，即可实现由父组件改变子组件状态的需求。
例子：我们创建一个父组件ParentComponent和一个子组件ChildComponent，在ParentComponent中向ChildComponent传递一个数组类型的prop属性，并在ChildComponent中监听一个自定义事件update，当ParentComponent中的数据变化时触发这个事件，并在ChildComponent中执行相应的方法。
// 父组件
Vue.component('parent-component',{
template: '<div><p><button @click="changeData">Change Data</button></p><child-component :prop="data" @update="updateData"></child-component></div>',
data() {
return {
data: [1, 2, 3]
}
},
methods: {
changeData() {
this.data.push(4);
console.log('Parent Data:',this.data); // 输出："Parent Data: [1, 2, 3, 4]"
this.$children[0].$emit('update');
},
updateData() {
console.log('Child Data:',this.$children[0].data); // 输出："Child Data: [1, 2, 3, 4]"
}
}
});
// 子组件
Vue.component('child-component', {
props: ['prop'],
data() {
return {
data: this.prop
}
},
mounted() {
console.log('Child Data:',this.data); // 输出："Child Data: [1, 2, 3]"
this.$on('update', () => {
this.data = this.$parent.data;
});
}
});
4. 总结
在本文中，我们介绍了Vue中父子组件通讯的常见形式，包括通过$parent和$children属性访问父组件和子组件，以及通过自定义事件在父组件和子组件之间传递数据。
需要注意的是：
使用$parent和$children属性获取到的父组件和子组件是“非响应式”的，即它们的值不会随着数据的改变而发生改变；
当使用自定义事件传递数据时，需要在父组件和子组件中分别使用$emit和$on方法来触发和监听自定义事件；
在Vue 2.x中，一个组件可以使用.sync修饰符来简化父子组件之间通过自定义事件传递数据的过程；
在Vue 3.x中，通过v-model指令可以方便地实现父子组件之间的双向绑定。