欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS前端攻堅Eventbus實現(xiàn)更新示例詳解

 更新時間：2022年12月14日 16:07:25   作者：一只大加號  
這篇文章主要為大家介紹了JS前端攻堅Eventbus實現(xiàn)更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

全局注冊

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

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

注冊Ebus事件

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

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

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

觸發(fā)Ebus事件

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

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

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

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

相關(guān)文章

最新評論