vue 非父子传递EventBus事件总线模式开发
文章 1614 0 0 0
发布时间:2019年12月05日

概述

EventBus 是一个非常重要且常用的东西,在不相关组件通信方面有着很强大的作用。

EventBus

想想如果从最顶层组件传一个 data 给最底层组件,仅仅使用父子传递的方式会变得十分麻烦。

而 EventBus就是用来解决这个问题的:在需要获取 data 的组件上设置一个监听器,每次要传递 data 时,那个组件就广播这个事件并调用这些监听器。

我们不难发现 EventBus 的主要功能就两个: 监听和广播,当然还有去掉监听器。

而 Vue 刚好给我们提供了这些功能,我们可以使用 Vue 来描述这些功能:

let eventBus = new Vue()
// 监听
eventBus.$on('eventName', (data) => {
    console.log('Trigger this event and receive ' + data)
})

// 广播
eventBus.$emit('eventName', data)

// 去掉监听
eventBus.$off('eventName')

有没有感觉很优雅呢?其实本质上这里就借用了 Vue 的事件监听功能来完成 EventBus 的。

依赖注入

优雅是优雅,但是这明显是个全局变量呀,难道我们要将它放在入口 main.js 里面初始化么?还是放在 Vue.prototype 里直接用 this.eventBus 来使用呢?No no no,Vue 给我们提供了一个更简洁的写法:依赖注入。

在顶层组件的 data 里初始化eventBus,并使用 provide 对外暴露这个 eventBus。

import Vue from "vue";
export default {
    name: "App",
    components: {
        GrandParent
    },
    data() {
        return {
            eventBus: new Vue()
        };
    },
    provide() {
        return {
            eventBus: this.eventBus
        };
    },
    methods: {
        setRandomValue() {
            this.eventBus.$emit("update:msg", Math.random() * 100);
        }
    }
};

然后在需要监听的组件里用 inject 注入这个依赖,并在 created 里添加事件监听。

export default {
    inject: ["eventBus"],
    data() {
        return {
            msg: ""
        };
    },
    created() {
        this.eventBus.$on("update:msg", msg => {
            this.msg = msg;
        });
    }
};

最终的结果是在 App 里修改 msg,添加监听事件的子组件都会获取最新的 msg,并用其再更新自己的数据或者状态。

我们也可以在main.js 初始化的时候直接绑定

new Vue({
    router,
    store,
    render: h => h(App),
    data: {
        eventBus: new Vue()
    }
}).$mount('#app')

但是我们用事件总线来开发app或者公众号的时候会产生失效的bug慎用!慎用

vue 非父子传递EventBus事件总线模式开发

评论专区