Vue事件总线（EventBus）

Vue事件总线（EventBus）

当vue组件之间进行通信时，比如父组件向子组件传值时用prop，子组件向父组件传递数值时用$emit。但是两个组件不是父子关系的时候要怎么通信呢？这个时候就可以用到事件总线（EventBus）了。

EventBus的介绍

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

EventBus的使用

（一）首先创建一个event-bus.js文件

（二）在文件里面写入以上代码：

import Vue from 'vue';
// 创建事件总线并将其导出，以便其它模块可以使用或者监听它
// 不具备 DOM 的组件，它具有的仅仅只是它实例方法而已
export const EventBus = new Vue();

在组件使用EventBus

（一）先在组件里引入event-bus.js文件

import { EventBus } from '../modules/event-bus';

（二）发送事件

handleChange为事件名称，对象里面的是需要传递的{参数}

EventBus.$emit('handleChange', {
    rightData:this.rightData,
    inputValue: this.inputValue + '',
    inputShowValue: this.inputShowValue
}); // 事件总线

（三）接收事件

handleChange为事件名称，对象里面的是需要接收的{参数}

EventBus.$on("handleChange", ({rightData, inputValue, inputShowValue}) => {
    //console.log(rightData, inputValue)
    this.rightFormData[rightData] = inputValue;
    // console.log(this.rightFormData)
})

（四）关闭事件

全局定义的事件是不会跟随组件的生命周期函数进行状态改变的。切换路由时，如果不手动清除事件的话，它会注册多次，一次点击触发多次事件。
在每次创建事件之前，手动清除定义的事件（根据实际的业务需求也可以在beforeDestroy()和destroyed()）

//在每次创建事件之前，手动清除定义的事件（根据实际的业务需求也可以在beforeDestroy()和destroyed()）
EventBus.$off('handleChange');

END~