通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案
1.创建一个vue实例,导出这个实例
import Vue from 'Vue'
export default new Vue
2.在两个需要通信的两个组件中分别引入这个bus.js
import Bus from '这里是你引入bus.js的路径' // Bus可自由更换喜欢的名字
3.传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据。
Bus.$emit('click',data) // 这个click是一个自定义的事件名称,data就是你要传递的数据。
4.被传递数据的组件内通过vue实例方法$on监听到事件和接受到数据。
Bus.$on('click',target => {
console.log(target) // 注意:发送和监听的事件名称必须一致,target就是获取的数据,可以不写target。只要你喜欢叫什么都可以(当然了,这一定要符合形参变量的命名规范)
})
5.在vue生命周期beforeDestroy或者destroyed中用vue实例的$off方法清除eventBus
beforeDestroy(){
bus.$off('click')
}