眾所周知，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: {
    /*對多級父組件進(jìn)行事件派發(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));
      }
    },
    /*
        向所有子組件進(jìn)行事件廣播。
        這里包了一層，為了修改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。