Vue多个子组件的EventBus

发表于 | 分类于

前言

我在 轱辘UI 项目做 tabs 组件时，该组件有父子组件通讯的需求，然而多个子组件之间怎么通讯呢？我了解到可以用 EventBus 结合 依赖注入 来解决。

什么是EventBus

即组件共用的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

如何在父子组件中使用EventBus

父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
    data(){
        return {
            eventBus: new Vue()
        }
    },
    provide() {
        return {
            eventBus: this.eventBus
        }
    },
    mounted() {
        this.eventBus.$emit('event', () => {

        })
    }
}

所有后代组件：

1
2
3
4
5
6
7
8
export default {
    inject: ['eventBus'],
    mounted() {
        this.eventBus.$on('event', () => {

        })
    }
}

其实就是用一个新的Vue实例的 $emit $on 和 $off 这三个接口来达到一个 EventBus 的效果

更多可见我的 tabs组件 相关代码