如果2个组件不是父子组件那么如何通信呢?
这时可以通过eventHub来实现通信,
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。(或者使用vuex)
new Vue({
el: '#app',
data: {
eventHub: new Vue()
}
})
然后通过this.$root.eventHub获取,下面代码简写为eventHub。
组件1触发:
<div @click="eve"></div>
methods: {
eve() {
eventHub.$emit('change', params); //eventHub触发事件
}
}
组件2接收:
<div></div>
created() {
eventHub.$on('change', (params) => { //eventHub接收事件
});
}
这样就实现了非父子组件之间的通信了,原理就是把Hub当作一个中转站!