Vue 中央事件总线 eventBus

中央事件总线eventBus

其实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信，它是实现非父子组件通信的一种解决方案

实现方式：
1.在项目中创建一个js文件，取名eventBus.js,引入vue实例，导出这个实例
import Vue from ‘Vue’
export default new Vue

2.在需要通信的两个组建中分别引入这个eventBus.js
import Bus from ‘’;

3.传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据Bus.$emit(‘eventName’,data);

4.接收数据的组件里通过$on监听事件和接收数据【通常挂载监听在vue生命周期created和mounted之一】Bus.$on( ‘eventName’, target => {
console.log(target); //target：传递过来的数据
})

补充点：
1.只监听一次
Bus.$once(‘eventName’, target => {
console.log(target); //target：传递过来的数据
})

2.清除事件总线eventBus
beforeDestroy(){
Bus.$off{(}^{\prime }eventNam{e}^{\prime });//移除指定Bus.$off(); //移除所有
}