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')

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

// $on 的实现逻辑
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {const vm: Component = thisif (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 = thislet cbs = vm._events[event]if (cbs) {cbs = cbs.length > 1 ? toArray(cbs) : cbsconst 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 restry {res = args ? handler.apply(context, args) : handler.call(context)} catch (e) {handleError(e, vm, info)}return res
}

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

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