vue源码解析：vue事件方法之$emit方法的实现原理

vue中事件方法一共就四个，挂载在vue实例上的$emit在我们做子组件向父组件传值时，通常会用到，那么$emit的内部实现原理是什么呢？下面我们来详细说下$emit:

vm.$emit( eventName, […args] )

• 参数：
  • {string} eventName 触发的事件名
  • [...args] 传递给事件的参数
• 作用： 触发当前实例上的事件。附加参数都会传给监听器回调。
• 内部原理：

$emit也是采用了发布订阅者设计模式。 

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
  }
}

 根据传入的事件名从当前实例的_events属性（即事件中心）中获取到该事件名所对应的回调函数cbs，然后再获取传入的附加参数args，由于cbs是一个数组，所以遍历该数组，拿到每一个回调函数，执行回调函数并将附加参数args传给该回调。

就是这么简单，这就是$emit的原理。