Vue之eventBus

1.前言

vue组件非常常见的有父子间通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过props向下传数据

给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。今天就来说说如果两个页面没有任何引入

和被引入关系，组件改如何通信？

2.简介

EventBus又称事件总线。在Vue中可以使用eventbus来作为沟通桥梁的概念，就像是所有组件共用

相同的事件中心，可以向该中心注册发送和接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，

就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心。

3.使用

3.1 初始化—全局定义

//main.js
//方式一
Vue.prototype.$EventBus = new Vue();
//方式二
window.eventBus = new Vue();

3.2 触发事件

//使用方式一定义时
this.$EventBus.$emit('eventName', param1,param2,...)
//使用方式二定义时
EventBus.$emit('eventName', param1,param2,...)

3.3 接收事件

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

3.4 移除监听事件

为了避免在监听时，事件被反复触发，通常需要在页面销毁时移除事件监听。或者在开发过程中，由于热更新，事件可能会被多次绑定监听，这时也需要移除事件监听。

//使用方式一定义时
this.$EventBus.$off('eventName');
//使用方式二定义时
EventBus.$off('eventName');

参考：https://blog.csdn.net/qq_26834399/article/details/106387585

​ https://zhuanlan.zhihu.com/p/72777951