眾所周知巩趁，Vue 在 2.0 版本中去除了dispatch 方法喷众，最近在學(xué)習(xí)餓了么的Element時重新實現(xiàn)了這兩種方法洗做，并以 minix 的方式引入。
看一下源代碼
function broadcast(componentName, eventName, params) {
/*遍歷當(dāng)前節(jié)點下的所有子組件*/
this.$children.forEach(child => {
/*獲取子組件名稱*/
var name = child.$options.componentName;
if (name === componentName) {
/*如果是我們需要廣播到的子組件的時候調(diào)用$emit觸發(fā)所需事件，在子組件中用$on監(jiān)聽*/
child.$emit.apply(child, [eventName].concat(params));
} else {
/*非所需子組件則遞歸遍歷深層次子組件*/
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
/*對多級父組件進行事件派發(fā)*/
dispatch(componentName, eventName, params) {
/*獲取父組件，如果以及是根組件姆蘸，則是$root*/
var parent = this.$parent || this.$root;
/*獲取父節(jié)點的組件名*/
var name = parent.$options.componentName;
while (parent && (!name || name !== componentName)) {
/*當(dāng)父組件不是所需組件時繼續(xù)向上尋找*/
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
/*找到所需組件后調(diào)用$emit觸發(fā)當(dāng)前事件*/
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
/*
向所有子組件進行事件廣播。
這里包了一層芙委，為了修改broadcast的this對象為當(dāng)前Vue實例
*/
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};
其實這里的broadcast與dispatch實現(xiàn)了一個定向的多層級父子組件間的事件廣播及事件派發(fā)功能逞敷。完成多層級分發(fā)對應(yīng)事件的組件間通信功能。
broadcast通過遞歸遍歷子組件找到所需組件廣播事件灌侣，而dispatch則逐級向上查找對應(yīng)父組件派發(fā)事件推捐。
broadcast需要三個參數(shù)，componentName（組件名）侧啼，eventName（事件名稱）以及params（數(shù)據(jù)）牛柒。根據(jù)componentName深度遍歷子組件找到對應(yīng)組件emit事件eventName。
dispatch同樣道理痊乾，需要三個參數(shù)皮壁，componentName（組件名），eventName（事件名稱）以及params（數(shù)據(jù)）符喝。根據(jù)componentName向上級一直尋找對應(yīng)父組件，找到以后emit事件eventName甜孤。
