Elemen-ui 中的 dispatch 和 broadcast

起因

最近学习了部分 element-ui 的源码，发现了两个不太熟的 api ---> dispatch 和 broadcast 主要用于触发特定组件的特定方法使用。

boradcast

通俗来讲，这个方式就是自上而下的广播事件。
这个方法用来父组件在特定的时机像子组件派发一些信息。代码如下：

function broadcast(componentName, eventName, params) {
  // 父组件向子组件派发事件
  this.$children.forEach(child => {
    var name = child.$options.componentName;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}

上面代码中存在一个递归查找，直到找到了目标子组件为止。如果找到了对应的子组件使用$emit去触发子组件上注册的对应的事件

dispatch

通俗来讲，这个方法就是自下而上的发射（冒泡）事件。
这个方法主要是用来子组件向特定的父组件进行一些消息通知。代码如下：

dispatch(componentName, eventName, params) {
      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;
        }
      }
      if (parent) {
        // apply 的参数是数组
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    }

上面代码中存在一个递归查找，直到找到了目标父组件为止。如果找到了对应的父组件使用$emit去触发父组件上注册的对应的事件

发现

由此可以看出，以上两种方法提供了查找目标父/子元素的方法。