前言vue組件非常常見(jiàn)的有父子組件通信，兄弟組件通信。而父子組件通信就很簡(jiǎn)單，父組件會(huì)通過(guò) props 向下傳數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過(guò) $emit 事件告訴父組件。今天就來(lái)說(shuō)說(shuō)如果兩個(gè)頁(yè)面沒(méi)有任何引入和被引入關(guān)系，該如何通信了？ 如果咱們的應(yīng)用程序不需要類似Vuex這樣的庫(kù)來(lái)處理組件之間的數(shù)據(jù)通信，就可以考慮Vue中的 事件總線 ，即 EventBus來(lái)通信。 EventBus的簡(jiǎn)介EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來(lái)作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊(cè)發(fā)送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會(huì)造成難以維護(hù)的“災(zāi)難”，因此才需要更完善的Vuex作為狀態(tài)管理中心，將通知的概念上升到共享狀態(tài)層次。 如何使用EventBus??? 一、初始化 首先需要?jiǎng)?chuàng)建事件總線并將其導(dǎo)出，以便其它模塊可以使用或者監(jiān)聽它。我們可以通過(guò)兩種方式來(lái)處理。先來(lái)看第一種，新創(chuàng)建一個(gè) .js 文件，比如 event-bus.js // event-bus.js import Vue from 'vue' export const EventBus = new Vue() 實(shí)質(zhì)上EventBus是一個(gè)不具備 DOM 的組件，它具有的僅僅只是它實(shí)例方法而已，因此它非常的輕便。 另外一種方式，可以直接在項(xiàng)目中的 main.js 初始化 EventBus : // main.js Vue.prototype.$EventBus = new Vue()
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ，接下來(lái)你需要做到的就是在你的組件中加載它，并且調(diào)用同一個(gè)方法，就如你在父子組件中互相傳遞消息一樣。 二、發(fā)送事件 假設(shè)你有兩個(gè)Vue頁(yè)面需要通信： A 和 B ，A頁(yè)面 在按鈕上面綁定了點(diǎn)擊事件，發(fā)送一則消息，想=通知 B頁(yè)面。 <!-- A.vue --> <template> <button @click='sendMsg()'>-</button> </template> <script> '../event-bus.js'; ='send sg()'>- { ton> > t { EventBus }('aMsg', '來(lái)自A頁(yè)面的消息'); } } }; </script> 接下來(lái)，我們需要在 B頁(yè)面 中接收這則消息。 三、接收事件 <!-- IncrementCount.vue --> <template> <p>{{msg}}</p> </template> <script> '../event-bus.js'; g}} import { ntB: '' } }, nt-bus.() { rt default {('aMsg', ( ) => { // A發(fā)送來(lái)的消息 }, = nte; }); } }; </script>同理我們也可以在 B頁(yè)面 向 A頁(yè)面 發(fā)送消息。這里主要用到的兩個(gè)方法： // 發(fā)送消息 EventBus.$emit(channel: string, callback(payload1,…)) // 監(jiān)聽接收消息 EventBus.$on(channel: string, callback(payload1,…)) 前面提到過(guò)，如果使用不善，EventBus 會(huì)是一種災(zāi)難，到底是什么樣的“災(zāi)難”了？大家都知道vue是單頁(yè)應(yīng)用，如果你在某一個(gè)頁(yè)面刷新了之后，與之相關(guān)的EventBus會(huì)被移除，這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁(yè)面，EventBus在監(jiān)聽的時(shí)候就會(huì)觸發(fā)很多次，也是一個(gè)非常大的隱患。這時(shí)候我們就需要好好處理 EventBus 在項(xiàng)目中的關(guān)系。通常會(huì)用到，在vue頁(yè)面銷毀時(shí)，同時(shí)移除EventBus 事件監(jiān)聽。 移除事件監(jiān)聽者如果想移除事件的監(jiān)聽，可以像下面這樣操作： import { eventBus } from './event-bus.js' EventBus.$off('aMsg', {})你也可以使用 EventBus.$off('aMsg') 來(lái)移除應(yīng)用內(nèi)所有對(duì)此某個(gè)事件的監(jiān)聽?；蛘咧苯诱{(diào)用 EventBus.$off() 來(lái)移除所有事件頻道，不需要添加任何參數(shù) 。 上面就是 EventBus 的使用方法，是不是很簡(jiǎn)單。上面的示例中我們也看到了，每次使用 EventBus 時(shí)都需要在各組件中引入 event-bus.js 。事實(shí)上，我們還可以通過(guò)別的方式，讓事情變得簡(jiǎn)單一些。那就是創(chuàng)建一個(gè)全局的 EventBus 。接下來(lái)的示例向大家演示如何在Vue項(xiàng)目中創(chuàng)建一個(gè)全局的 EventBus 。 全局EventBus它的工作原理是發(fā)布/訂閱方法，通常稱為 Pub/Sub 。 創(chuàng)建全局EventBus var EventBus = new Vue(); Object.defineProperties(Vue.prototype, { $bus: { get: function () { return EventBus } } }) 在這個(gè)特定的總線中使用兩個(gè)方法 $on 和 $emit 。一個(gè)用于創(chuàng)建發(fā)出的事件，它就是 $emit ；另一個(gè)用于訂閱 $on ： var EventBus = new Vue(); this.$bus.$emit('nameOfEvent', { ... pass some event data ...}); this.$bus.$on('nameOfEvent',($event) => { // ... })然后我們可以在某個(gè)Vue頁(yè)面使用 this.$bus.$emit('sendMsg', '我是web秀');，另一個(gè)Vue頁(yè)面使用 this.$bus.$on('updateMessage', function(value) { console.log(value); // 我是web秀 }) 同時(shí)也可以使用this.$bus.$off('sendMsg')來(lái)移除事件監(jiān)聽。 總結(jié)本文主要通過(guò)簡(jiǎn)單的實(shí)例學(xué)習(xí)了Vue中有關(guān)于 EventBus 相關(guān)的知識(shí)點(diǎn)。主要涉及了 EventBus 如何實(shí)例化，又是如何通過(guò) $emit 發(fā)送頻道信號(hào)，又是如何通過(guò) $on 來(lái)接收頻道信號(hào)。最后簡(jiǎn)單介紹了如何創(chuàng)建全局的 EventBus 。從實(shí)例中我們可以了解到， EventBus 可以較好的實(shí)現(xiàn)兄弟組件之間的數(shù)據(jù)通訊。 喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！ |
|
|
