element元件庫broadcast與dispatch原始碼解析
阿新 • • 發佈:2020-08-03
周所周知,Vue在2.0版本中去除了$broadcast方法以及$dispatch方法,最近在學習餓了麼的Element時重新實現了這兩種方法,並以minix的方式引入。
廢話不多說,上程式碼
function broadcast(componentName, eventName, params) { /*遍歷當前節點下的所有子元件*/ this.$children.forEach(child => { /*獲取子元件名稱*/ var name = child.$options.componentName; if (name === componentName) { /*如果是我們需要廣播到的子元件的時候呼叫$emit觸發所需事件,在子元件中用$on監聽*/ child.$emit.apply(child, [eventName].concat(params)); } else { /*非所需子元件則遞迴遍歷深層次子元件*/ broadcast.apply(child, [componentName, eventName].concat([params])); } }); } export default { methods: { /*對多級父元件進行事件派發*/ dispatch(componentName, eventName, params) { /*獲取父元件,如果以及是根元件,則是$root*/ var parent = this.$parent || this.$root; /*獲取父節點的元件名*/ var name = parent.$options.componentName; while (parent && (!name || name !== componentName)) { /*當父元件不是所需元件時繼續向上尋找*/ parent = parent.$parent; if (parent) { name = parent.$options.componentName; } } /*找到所需元件後呼叫$emit觸發當前事件*/ if (parent) { parent.$emit.apply(parent, [eventName].concat(params)); } }, /* 向所有子元件進行事件廣播。 這裡包了一層,為了修改broadcast的this物件為當前Vue例項 */ broadcast(componentName, eventName, params) { broadcast.call(this, componentName, eventName, params); } } };
其實這裡的broadcast與dispatch實現了一個定向的多層級父子元件間的事件廣播及事件派發功能。完成多層級分發對應事件的元件間通訊功能。
broadcast通過遞迴遍歷子元件找到所需元件廣播事件,而dispatch則逐級向上查詢對應父元件派發事件。
broadcast需要三個引數,componentName(元件名),eventName(事件名稱)以及params(資料)。根據componentName深度遍歷子元件找到對應元件emit事件eventName。
dispatch同樣道理,需要三個引數,componentName(元件名),eventName(事件名稱)以及params(資料)。根據componentName向上級一直尋找對應父元件,找到以後emit事件eventName。