Vue项目中EventBus全局挂载与通信实现详解

引言

近期复盘公司项目时，发现此前未涉及EventBus的相关案例实现。本文将简要介绍各部分的实现方式，整体方法较为简单，主要包含三个步骤：全局挂载、事件注册以及事件触发。

全局注册

在创建Vue实例时，需对EventBus进行挂载。具体方式是在new Vue的过程中包含所需方法，而EventBus的注册应在beforeCreate生命周期钩子中完成实例化。在此阶段，我们将EventBus绑定至Vue的原型对象，即将this赋值给Vue.prototype.eventBus，至此EventBus的全局注册即告完成。

new Vue({
    router,
    store,
    i18n,
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.eventBus = this;
    },
}).$mount('#app');

注册Ebus事件

EventBus的设计初衷即为解决不同组件间的通信问题。因此，事件的注册与触发需分布在不同的位置。若仅为普通的父子组件通信，则无需使用EventBus的功能。

我们在flow页面中针对flow-refresh-id事件进行注册。从代码可见，笔者注册的是动态事件名，通过动态添加事件的方式，可以确保不同id调用相同事件时的准确性。一次注册写法可同时注册多个监听事件，此处演示的是创建节点的事件，具体功能细节在此不作展开。

//flow.vue
let vm = this
vm.eventBus.$on(`flow-refresh-${vm.obj.id}`, (flowNewNodeData) => {
    vm.createNewNode(flowNewNodeData);
});

触发Ebus事件

在flow.vue页面完成事件注册后，即可在其他页面调用已注册的事件。通过vm.eventBus.$emit方法，在dataD.vue页面中触发之前注册好的事件。

//dataD.vue
let vm = this
 vm.eventBus.$emit(
    `flow-refresh-${this.menuActive.businessId}`,
    vm.flowNewNodeData
);

本文仅简单记录了EventBus的完整实现过程，包括从全局注册EventBus插件，到页面注册监听事件，再到另一页面触发其他页面注册事件的整个流程。

以上就是JS前端攻坚Eventbus实现更新示例详解的详细内容，更多关于JS前端Eventbus更新的资料请关注本站其它相关文章！