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插件，再到頁面註冊監聽事件，另外一個頁面觸發其他頁面註冊的實現。