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