vue的$on和$emit

Vue.prototype.$on = function (event, fn) { const hookRE = /^hook:/    //检测自定义事件名是不是hook:开头
 const vm = this
  if (Array.isArray(event)) {  // 若是第一个参数是数组
    for (let i = 0; i < event.length; i++) { this.$on(event[i], fn)  // 递归
 } } else { (vm._events[event] || (vm._events[event] = [])).push(fn) // 若是有对应事件名就push，没有建立为空数组而后push
    
    if (hookRE.test(event)) {  // 若是是hook:开头
      vm._hasHookEvent = true  // 标志位为true
 } } return vm }

Vue.prototype.$emit = function (event) { const vm = this let cbs = vm._events[event]  // 找到事件名对应的回调集合
  if (cbs) { const args = toArray(arguments, 1)  // 将附加参数转为数组
    
    for (let i = 0; i < cbs.length; i++) { cbs[i].apply(vm, args) // 挨个执行对应的回调集合
 } } return vm }

在组件（当前组件实例）的$on和$emit的执行原理：

$on往当前组件实例的事件中心（this._events）添加自定义事件
$emit在事件中心找到对应的自定义事件后调用事件

父子组件经过@传递事件详解：

父组件在编译模板后将子组件（@自定义事件="回调"）的自定义事件及其回调经过$on添加到子组件的事件中心（this._events）