事件机制是Vue中重要的通信机制，这里看下源码简单说明下Vue事件emit和on的实现：

 $on和$emit函数的实现：

```Vue.prototype.$on = function (event: string | Array, fn: Function): Component {

    const vm: Component = this

    if (Array.isArray(event)) {

      for (let i = 0, l = event.length; i < l; i++) {

        this.$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

  }

```

很简单，就是创建一个event数组成员，保存定义的事件名称和处理函数，数组的下标就是时间的名称，value是函数引用。但是要注意，时间都是保存在当前对象上的，比如new了一个组件的实例A，在A上注册的事件，是在A的_event数组中保存。

```Vue.prototype.$emit = function (event: string): Component {

    const vm: Component = this

    ... 省略不重要代码

    let cbs = vm._events[event]

    if (cbs) {

      cbs = cbs.length > 1 ? toArray(cbs) : cbs

      const args = toArray(arguments, 1)

      for (let i = 0, l = cbs.length; i < l; i++) {

        try {

          cbs[i].apply(vm, args)

        } catch (e) {

          handleError(e, vm, `event handler for "${event}"`)

        }

      }

    }

    return vm

  }

}

```

这个函数也很简单，emit直接调用了注册在本组件上的响应函数。**但是，这是问题的全部么？**，比如组件B上emit了一个事件，而这个事件注册在组件A上，这时候，必须执行A上的emit才可以完成整个事件流程，那这又是在哪里实现的呢？

仔细回忆了下emit和on的使用：

1. 父子组件通信，子组件可以emit然后修改父组件的data来实现通讯，这里on和emit都在子组件上，注意不是子组件emit父组件on，而是都在子组件上。

2. 组件之间通信，使用专门的通信组件bus，此时，on和emit都在Vue的实例bus上调用。

所以emit和on都是在同一个实例上调用的，上面的代码**That’s all**。