Vue2.x中兄弟组件之间传值可以使用Vuex来达到目的，如果项目中不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线 ，即 EventBus来通信。
vue2.x中实现实现EventBus
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
或者
// main.js
Vue.prototype.$EventBus = new Vue()
因为vue实例中提供了$on、$emit等方法所以只需要创建一个空的vue实例，在组件中通过$on()注册事件，在另外一个组件中通过$emit()去执行对应的事件并且可以传参来达到组件之间的通讯。
实现一个简单的EventBus
const eventBus = () => {
/* 订阅器 */
subs = new Map();
return {
subs,
/**
* 注册事件
* @param {string} type 事件类型
* @param {Function} callback 回调函数
*/
$on (type, callback) {
const sub = subs.get(type);
const isEmpty = sub && sub.push(callback);
if (!isEmpty) {
subs.set(type, [callback]);
}
},
/**
* 触发事件
* @param {string} type 事件类型
* @param {Any} payload 传递的参数
*/
$emit (type, ...payload) {
(subs.get(type) || []).forEach(fn => { fn(...payload) });
(subs.get('*') || []).forEach(fn => { fn(...payload) }); /* 所有事件类型都执行 */
},
/**
* 注销事件
* @param {string} type 事件类型
* @param {Function} callback 回调函数
*/
$off (type, callback) {
const sub = subs.get(type);
if (sub) {
sub.splice(sub.indexOf(callback) >>> 0, 1);
}
}
}
}
module.exports = eventBus
subs订阅器可以使用对象或者来Map来实现，Map自带clear方法可以清除所有注册的事件
subs = new Map();
其原理就是以事件类型type作为Map的key值，以数组作为value值，数组里面装的是一个个执行的回调函数，通过$on注册的事件如果是相同的type就会被push同一个数组当中，调用$emit的时候找到对应的type循环数组执行里面所有的回调函数。
使用
const eventBus = require('./eventBus')
const emitter = eventBus()
// 注册change事件
emitter.$on('change', (...payload) => {
console.log('change', ...payload)
})
// 调用所有事件都会执行这个方法
emitter.$on('*', (...payload) => {
console.log('all', ...payload)
})
//触发change事件
emitter.$emit('change', '参数1', '参数2')
运行结果
image
可以使用Map自带的clear清空EventBus
emitter.subs.clear() // 清空EventBus
