引言

最近復(fù)盤(pán)了一下公司的項(xiàng)目，之前一直沒(méi)有做過(guò)相關(guān)的Eventbus的案例實(shí)現(xiàn)，這篇文章大概簡(jiǎn)要的介紹一下各個(gè)部分是如何實(shí)現(xiàn)的，實(shí)現(xiàn)的方法比較簡(jiǎn)單，主要分為三個(gè)步驟，分別是全局掛載，注冊(cè)，以及注冊(cè)事件的觸發(fā)。

全局注冊(cè)

在newVue的時(shí)候需要對(duì)我們的eventbus進(jìn)行掛載，掛載方式如下，newvue中包含了需要用到的方法，eventbus的注冊(cè)需要在beforeCreate鉤子中進(jìn)行實(shí)例化，在這里我們的對(duì)eventbus在vue的原型上進(jìn)行綁定，我們將this傳入到Vue.prototype.eventBus上，那么eventbus的注冊(cè)就已經(jīng)是完成了。

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

注冊(cè)Ebus事件

EventBus的出現(xiàn)本身就是為了解決不同組件之間的通信問(wèn)題，所以我們的注冊(cè)事件和觸發(fā)事件需要在不同的地方，如果是普通的父子組件之間的通信的話(huà)就沒(méi)有必要用到Ebus的功能了

我們?cè)趂low頁(yè)面對(duì)flow-refresh-id的事件進(jìn)行注冊(cè)，在這里可以看出筆者注冊(cè)的是動(dòng)態(tài)的一個(gè)事件，通過(guò)動(dòng)態(tài)添加事件的方法可以區(qū)分出不同id之間調(diào)用相同事件的準(zhǔn)確性，一次注冊(cè)寫(xiě)法可以注冊(cè)出多個(gè)監(jiān)聽(tīng)事件，這里注冊(cè)的是一個(gè)創(chuàng)建節(jié)點(diǎn)的事件，具體的功能這里就不做講解了。

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

觸發(fā)Ebus事件

在flow.vue頁(yè)面注冊(cè)好事件之后我們就可以在其他頁(yè)面調(diào)用注冊(cè)的事件了，通過(guò)vm.eventBus.$emit的方法在dataD.vue頁(yè)面來(lái)觸發(fā)已經(jīng)注冊(cè)好的事件。

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

本文只是簡(jiǎn)單的記錄一下實(shí)現(xiàn)Ebus的一整個(gè)實(shí)現(xiàn)過(guò)程，從全局注冊(cè)Ebus插件，再到頁(yè)面注冊(cè)監(jiān)聽(tīng)事件，另外一個(gè)頁(yè)面觸發(fā)其他頁(yè)面注冊(cè)的實(shí)現(xiàn)。

以上就是JS前端攻堅(jiān)Eventbus實(shí)現(xiàn)更新示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JS前端Eventbus更新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論