1. 父子组件通信
尽管我们可以使用
1️⃣this.$parent访问父组件实例
2️⃣this.$children访问所有的子组件实例
3️⃣this.$root组件所在的根实例
但这在vue中是不建议直接子组件操作父组件的数据的，或者父组件操作子组件的参数。
- 父传子： 通过props
- 子传父：这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的。
官网通信说明图
父组件代码
//parent.html子组件的引入
<v-test :title="testTitle" @changeTitle="changes"></v-test>
////监听子组件触发的changeTitle事件,然后调用changes方法
//parent.vue
import test from XXX;
export default {
components: {
vTest: test
},
data (){
return {
testTitle: "我是子组件标题名称"
}
},
methods: {
changes (msg) {
this.testTitle = msg;
}
}
}
子组件代码
child.html
<template>
<div> {{title}}</div>
<button @click="changeInfo"></button>
</template>
export default {
props: {
title: {
default: ""
}
},
methods: {
changeInfo () {
////主动触发changeTitle方法，'hehe'为向父组件传递的数据
this.$emit("changeTitle","我是新的title");
}
}
}
2. 兄弟组件通信
如果2个组件不是父子组件那么如何通信呢？这时可以通过eventHub来实现通信。
所谓eventHub就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。
let bus = new Vue(); //创建事件中心
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})
如果业务涉及很多的组件通信，推荐使用Vuex。
什么情况下我应该使用 Vuex？
虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
