Vue组件通信原理剖析（一）事件总线的基石 $on和$emit

首先我们先从一个面试题入手。

面试官问： “Vue中组件通信的常用方式有哪些？”
我答：
1. props
2. 自定义事件
3. eventbus
4. vuex
5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject
6. 此外还有一些非props特性$attrs、$listeners

面试官追问：“那你能分别说说他们的原理吗？”
我：[一脸懵逼]

下面我们就来一一看看他们内部的奥秘！
如果要看别的属性原理请移步到Vue组件通信原理剖析（二）全局状态管理Vuex和Vue组件通信原理剖析（三）provide/inject原理分析

props

解决问题：父给子传值

// child
props: {
     
  msg: {
     
    type: String,
    default: ''
  }
}

// parent
<child msg="这是传给子组件的参数"></child>

自定义事件

解决问题：子给父传值

// child
this.$emit('add', '这是子组件传给父组件的参数')

// parent
// parantAdd是定义在父组件中的事件，事件接受的参数$event就是子组件传给父组件的值
<child @add="parentAdd($event)"></child>

事件总线eventbus

解决问题：任意两个组件之间的传值

// 通常我们的做法是这样的
// main.js 
Vue.prototype.$bus = new Vue()

// child1
this.$bus.$on('foo', handle)

// child2
this.$bus.$meit('foo')

那么组件之间的通信到底是怎么实现的呢？$on和$emit具体是怎么实现的？我们去源码中找一找答案，let’s go!

// $on 的实现逻辑
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
     
    const vm: Component = this
    if (Array.isArray(event)) {
     
      for (let i = 0, l = event.length; i < l; i++) {
     
        vm.$on(event[i], fn)
      }
    } else {
     
      (vm._events[event] || (vm._events[event] = [])).push(fn)
    }
    return vm
  }

// $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)
      const info = `event handler for "${
       event}"`
      for (let i = 0, l = cbs.length; i < l; i++) {
     
        invokeWithErrorHandling(cbs[i], vm, args, vm, info)
      }
    }
    return vm
  }

// invokeWithErrorHandling 的实现逻辑
export function invokeWithErrorHandling (
  handler: Function,
  context: any,
  args: null | any[],
  vm: any,
  info: string
) {
     
  let res
  try {
     
    res = args ? handler.apply(context, args) : handler.call(context)
  } catch (e) {
     
    handleError(e, vm, info)
  }
  return res
}

上面就是我们在源码中找到的实现，其中有一些调试代码我已经删除掉，方便大家可以抓住重点！
下面我们来一一分析

1. 首先我们都了解vue的数据相应是依赖于“观察-订阅”模式，那$on、$emit也不例外;
2. $on用来收集所有的事件依赖，他会将传入的参数event和fn作为key和value的形式存到vm._events这个事件集合里，就像这样vm._events[event]=[fn];
3. 而$emit是用来触发事件的，他会根据传入的event在vm_events中找到对应的事件并执行invokeWithErrorHandling(cbs[i], vm, args, vm, info)
4. 最后我们看invokeWithErrorHandling方法可以发现，他是通过handler.apply(context, args)和handler.call(context)的形式执行对应的方法

是不是很简单！[偷笑]

我们既然知道怎么实现的，那么我们就可以自定义实现一个Bus, 看代码

// Bus： 事件派发、监听和回调
class Bus {
     
  constructor() {
     
    this.callbacks = {
     }
  }

  // 收集监听的回调函数
  $on(name, fn) {
     
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }

  // 执行监听的回调函数
  $emit(name, args) {
     
    if (this.callbacks[name]) {
     
      this.callbacks[name].forEach(cb => cb(args))
    }
  }
}

// 在main.js中这样使用
Vue.prototype.$bus = new Bus()

至此，关于总线的原理剖析就到这里。

全部文章链接

Vue组件通信原理剖析（一）事件总线的基石 $on和$emit
Vue组件通信原理剖析（二）全局状态管理Vuex
Vue组件通信原理剖析（三）provide/inject原理分析

最后喜欢我的小伙伴也可以通过关注公众号“剑指大前端”，或者扫描下方二维码联系到我，进行经验交流和分享，同时我也会定期分享一些大前端干货，让我们的开发从此不迷路。