谈到跨级组件通信，我最先想到的是eventBus，方便易用，可以在你想组合的组件之间，随意使用，甚至没有级别关系的组件，只要在一个组件系统中，就可以通信。但是，如果你想完成一个通用组件，而且它有专用的子级组件。当页面多次使用这个组件时，eventBus在触发时就会发生混乱。这时，就需要一个指代父子关系的约束。
- dispatch.(派发)，它的逻辑是，子组件触发一个事件，它的所有父级都可以监听到（这样，就可以实现多级通信）。vue中原来是有此方法的，官方建议，父子通信用on,emit，跨级就使用总线（eventBus），更复杂的可以使用vuex。
但是，如上所述，当你需要完成一个供别人使用的组件时，broadcast和dispatch就非常有用，上代码了
/**
* 首先给Vue原型增加dispatch方法
* @param eventName 要触发的事件名
* @param componentName 需要响应的父级（或者更高）
* @param val 传递给父级的数据
*/
Vue.prototype.$dispatch= function(eventName, componentName, value) {
let parent = this.$parent;
while (parent) {
if (parent.$options.name === componentName) { //这样就可以做到，通知特定的父级去响应
parent.$emit(eventName, value);
break;
}
parent = parent.$parent;
}
};
- broadcast. (广播)，父组件广播一个事件，它的所有子组件都可以接收到。
Vue.prototype.$broadcast = function(eventName, componentName, value) {
let children = this.$children;
function broadcast(children) {
children.forEach(child => {
if (child.$options.name === componentName) {
console.log(componentName, "广播");
child.$emit(eventName, value);
}
if (child.$children) {
broadcast(child.$children);
}
});
}
broadcast(children);
};
