vue组件跳层级时的事件处理 （事件的广播与派发）

相信大家一定用过elementui这个组件库，那么对里面的表单组件一定不陌生。

最常用的几个组件就是el-form，el-form-item，el-input，表单校验时的错误提示功能是交给el-form-item来实现的。当el-input填写时触发校验规则，验证失败后通知el-form-item进行错误信息提示。

他们大多时候是处于爷——父——子的关系，但是这个关系并不是完全固定的。我自己在使用的时候经常也不仅仅只使用这三个组件，简单举个例子：

<el-form>
  <el-form-item>
    <MyDiv>
      <el-input></el-input>
    </MyDiv>
  </el-form-item>
</el-form>

上面代码里面MyDiv可能只是一个简单的布局组件，没有什么实际作用，但是一旦加了之后el-input和el-form-item就脱离了父子关系，那么通讯方式也就会发生变化。如果之前el-input校验规则失败后使用的是this.$parent的方式去触发校验提示的话，当我们在他们之间添加其他组件后就会失效。并且这是不可控的，你无法预料他们可能被如何实现，甚至之间间隔了多少个组件，若是强硬的将两个组件封装在一起又会显得臃肿冗余，不符合组件封装的规范，所以这个时候就可以使用派发来实现。

dispatch 派发

我们直接看elementui源码时如何使用派发的方式解决我们上面提到的问题

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) {
     parent.$emit.apply(parent, [eventName].concat(params));
   }
 }

可以看出elementui其实就是遍历了父级组件，一直遍历拿到想要的组件为止。找到需要的组件后直接$emit派发事件，那么肯定在他们父级组件内部一定会有$on进行着事件监听。需要注意的是componentName这个属性是elementui自己在组件添加的，我们使用的时候直接使用name即可，name就是我们定义组件时自己定义的name

broadcast 广播

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]));
    }
  });
}

broadcast与dispatch 实现逻辑没什么区别，只是一个向上遍历进行派发，一个向下遍历进行广播。