Eventbus實現更新
開啟掘金成長之旅!這是我參與「掘金日新計劃 · 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插件,再到頁面註冊監聽事件,另外一個頁面觸發其他頁面註冊的實現。