1. 程式人生 > 實用技巧 >element元件庫broadcast與dispatch原始碼解析

element元件庫broadcast與dispatch原始碼解析

周所周知,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。