一、背景

基于Vue父子组件的通信规则，我发现我对父子组件通信出现了误解。首先父组件通过v-bind绑定参数到子组件身上，然后在子组件内通过“emit”，将相应的事件“抛出去”，然后在父组件内通过相应的事件来接收处理。
这里的问题在于我把这个事情弄错了，我一直以为是在子组件内注册相应的方法，然后在父组件内调用，其实不然，其实这是一个发布订阅模式。发布与订阅都是基于组件本身的，并不能跨组件调用，而是由于我们父子组件通信的时候，发布的位置与订阅的位置刚好在逻辑上隔了一层，导致的理解偏差。我们在子组件本身上注册了一个事件，形如@eventName=“handler”的形式，这个相当于是在向子组件身上添加订阅者，然后我们又在子组件内部通过this.$emit(‘eventName’, params)，“发射”触发这个事件，让父组件内部调用相应的方法来处理。

举个例子：

mounted() {
    this.$on('eventName', (val) => {
      console.log(val)
    })

    this.$emit('eventName', 'hello world')
}

这串代码先是在mounted生命周期里注册了一个事件，然后通过emit触发了这个事件，于是我们运行之后将会在浏览器控制台打印以下结果：

hello world.png

二、深入思考🤔

以下是Vue的原型上绑定的 $on和$ emit两个方法的源码，可以看出大佬们写代码就是飘逸，考虑周全。这两个函数其实就实现了发布订阅，通过this的隐式绑定，把事件中心绑定到相应的组件上，由他来统一处理相应的事件的发布与订阅。

Vue.prototype.$on = function (event, fn) {
    var vm = this;
    if (Array.isArray(event)) {
      for (var i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn);
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn);
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      if (hookRE.test(event)) {
        vm._hasHookEvent = true;
      }
    }
    return vm
  };

Vue.prototype.$emit = function (event) {
    var vm = this;
    if (process.env.NODE_ENV !== 'production') {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      var info = "event handler for \"" + event + "\"";
      for (var i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info);
      }
    }
    return vm
  };

基于这个原理，我们可以实现两个工具函数，这也是iview里面实现父子组件跨级通信的一种方式，一个叫broadcast，用于向子组件广播事件，另一个叫dispatch，相反的是向父组件传递事件。

function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params))
    } else {
      // todo 如果 params 是空数组，接收到的会是 undefined
      broadcast.apply(child, [componentName, eventName].concat([params]))
    }
  })
}

function dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root
      let name = parent.$options.name

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.name
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
}

这样我们就可以在子组件里通过改变了相应的事件而向其特定的父组件发射触发事件，但是必须先在父组件里通过$on注册相应的事件，以及回调函数。
这种方式是特别有效的，可以封装为一个工具函数。vue1.0中也实现了这两个方法，但有点不一样，它是通过是否返回true来判断是否继续“冒泡”，向上或者向下传递事件流。但是这些方法在vue2.0中已经废除了。

除此之外，我们还可以通过事件总线（eventBus）实现兄弟组件通信或其他跨级通信，这个原理就是通过在vue上挂载一个新的vue实例，然后在各个组件中引用它来发布和订阅相应的事件来通信。

三、总结

对于框架的学习不要停留在表面，一个工具怎么使用永远是最基本的要求，但是明白了工具内部的具体逻辑，就能更加灵活的使用它。遇到相应的问题最好先自己思索，多看源码，Vue内部有很多好的代码，好的机制，像我们使用的组件库的源码也可以看看，别人的CSS写法，函数写法，为什么要这么写，都是值得我们思考学习的。

Vue emit & on 探讨

Vue emit & on 探讨

一、背景

二、深入思考🤔

三、总结