Eventbus实现更新

语言: CN / TW / HK

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情

最近复盘了一下公司的项目,之前一直没有做过相关的Eventbus的案例实现,这篇文章大概简要的介绍一下各个部分是如何实现的,实现的方法比较简单,主要分为三个步骤,分别是全局挂载,注册,以及注册事件的触发。

全局注册

在newVue的时候需要对我们的eventbus进行挂载,挂载方式如下,newvue中包含了需要用到的方法,eventbus的注册需要在beforeCreate钩子中进行实例化,在这里我们的对eventbus在vue的原型上进行绑定,我们将this传入到Vue.prototype.eventBus上,那么eventbus的注册就已经是完成了。

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

注册Ebus事件

EventBus的出现本身就是为了解决不同组件之间的通信问题,所以我们的注册事件和触发事件需要在不同的地方,如果是普通的父子组件之间的通信的话就没有必要用到Ebus的功能了

我们在flow页面对flow-refresh-id的事件进行注册,在这里可以看出笔者注册的是动态的一个事件,通过动态添加事件的方法可以区分出不同id之间调用相同事件的准确性,一次注册写法可以注册出多个监听事件,这里注册的是一个创建节点的事件,具体的功能这里就不做讲解了。

js //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页面来触发已经注册好的事件。

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

本文只是简单的记录一下实现Ebus的一整个实现过程,从全局注册Ebus插件,再到页面注册监听事件,另外一个页面触发其他页面注册的实现。