JS前端攻堅Eventbus實現(xiàn)更新示例詳解
引言
最近復(fù)盤了一下公司的項目，之前一直沒有做過相關(guān)的Eventbus的案例實現(xiàn)，這篇文章大概簡要的介紹一下各個部分是如何實現(xiàn)的，實現(xiàn)的方法比較簡單，主要分為三個步驟，分別是全局掛載，注冊，以及注冊事件的觸發(fā)。
全局注冊
在newVue的時候需要對我們的eventbus進行掛載，掛載方式如下，newvue中包含了需要用到的方法，eventbus的注冊需要在beforeCreate鉤子中進行實例化，在這里我們的對eventbus在vue的原型上進行綁定，我們將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的事件進行注冊，在這里可以看出筆者注冊的是動態(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)文章
?樹形圖可視化廣泛用于分層數(shù)據(jù)分析。如果你沒有經(jīng)驗還想創(chuàng)建一個，那將會有些復(fù)雜。下面是一個詳細(xì)教程，教你如何使用JavaScript創(chuàng)建交互式樹形圖2022-06-06
第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識
第二次聊一聊JS require.js模塊化工具的基礎(chǔ)知識，本文為大家JS require.js模塊化工具的最基本知識點，感興趣的小伙伴們可以參考一下2016-04-04
javascript實現(xiàn)發(fā)送短信驗證碼案例
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)發(fā)送短信驗證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果
這篇文章主要為大家詳細(xì)介紹了JS+CSS實現(xiàn)網(wǎng)頁加載中的動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別之處
其它的面向?qū)ο蟪绦蛟O(shè)計語言都是通過關(guān)鍵字來解決繼承的問題。但是javascript中并沒有定義這種實現(xiàn)的機制。接下來通過本文給大家介紹Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別,需要的朋友可以參考下2017-04-04
js實現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)省市區(qū)三級聯(lián)動非select下拉框版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
今天開發(fā)的時候，遇到要點擊縮略圖之后居中顯示圖片的大圖查看（大致效果如上圖所示）~想了好幾種實現(xiàn)方式,下面通過本文給大家分享JS點擊縮略圖整屏居中放大圖片效果，需要的朋友參考下吧2017-07-07
這篇文章主要介紹了親自教你TypeScript 項目搭建過程,我記得前一天，我們配置過一份 webpack 配置，直接復(fù)制過來使用，這里就不多說了，然后就是在項目中引入我們的 less，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了通過Kettle自定義jar包供javascript使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
JavaScript下一版本標(biāo)準(zhǔn)ES6的Set集合使用詳解
ES6：全稱ECMAScript 6.0，是JavaScript語言的國際標(biāo)準(zhǔn)，JavaScript是ECMAScript的實現(xiàn)。今天我們就來學(xué)習(xí)一下ES6的Set集合的使用2023-02-02