title: Vue多个子组件的EventBus
date: 2018-11-23 17:27:03
tags: [Vue]
categories: Vue
前言
我在 轱辘UI 项目做 tabs 组件时，该组件有父子组件通讯的需求，然而多个子组件之间怎么通讯呢？我了解到可以用 EventBus 结合 依赖注入 来解决。
什么是EventBus
即组件共用的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。
如何在父子组件中使用EventBus
父组件：
export default {
data(){
return {
eventBus: new Vue()
}
},
provide() {
return {
eventBus: this.eventBus
}
},
mounted() {
this.eventBus.$emit('event', () => {
})
}
}
所有后代组件：
export default {
inject: ['eventBus'],
mounted() {
this.eventBus.$on('event', () => {
})
}
}
其实就是用一个新的Vue实例的 on 和 $off 这三个接口来达到一个 EventBus 的效果
更多可见我的 tabs组件 相关代码
