vue篇之事件總線EventBus使用示例詳解
正文
許多現(xiàn)代JavaScript框架和庫的核心概念是能夠?qū)?shù)據(jù)和UI封裝在模塊化、可重用的組件中。這對于開發(fā)人員可以在開發(fā)整個應(yīng)用程序時避免使用編寫大量重復(fù)的代碼。
雖然這樣做非常有用,但也涉及到組件之間的數(shù)據(jù)通訊。在Vue中同樣有這樣的概念存在。通過前面一段時間的學(xué)習(xí),Vue組件數(shù)據(jù)通訊常常會有父子組件,兄弟組件之間的數(shù)據(jù)通訊。也就是說在Vue中組件通訊有一定的原則。
父子組件通訊原則
為了提高組件的獨立性與重用性,父組件會通過 props
向下傳數(shù)據(jù)給子組件,當(dāng)子組件有事情要告訴父組件時會通過 $emit
事件告訴父組件。如此確保每個組件都是獨立在相對隔離的環(huán)境中運行,可以大幅提高組件的維護(hù)性。
在《Vue組件通訊》一文中有詳細(xì)介紹過這部分。但這套通訊原則對于兄弟組件之間的數(shù)據(jù)通訊就有一定的詬病。當(dāng)然,在Vue中有其他的方式來處理兄弟組件之間的數(shù)據(jù)通訊,比如Vuex這樣的庫。但在很多情況之下,咱們的應(yīng)用程序不需要類似Vuex這樣的庫來處理組件之間的數(shù)據(jù)通訊,而可以考慮Vue中的 事件總線 ,即 **EventBus
**。
接下來的內(nèi)容,就是來一起學(xué)習(xí)Vue中的 EventBus
相關(guān)的知識點。
EventBus的簡介
EventBus
又稱為事件總線。在Vue中可以使用 EventBus
來作為溝通橋梁的概念,就像是所有組件共用相同的事件中心,可以向該中心注冊發(fā)送事件或接收事件,所以組件都可以上下平行地通知其他組件,但也就是太方便所以若使用不慎,就會造成難以維護(hù)的災(zāi)難,因此才需要更完善的Vuex作為狀態(tài)管理中心,將通知的概念上升到共享狀態(tài)層次。
如何使用EventBus
在Vue的項目中怎么使用 EventBus
來實現(xiàn)組件之間的數(shù)據(jù)通訊呢?具體可以通過下面幾個步驟來完成。
初始化
首先你需要做的是創(chuàng)建事件總線并將其導(dǎo)出,以便其它模塊可以使用或者監(jiān)聽它。我們可以通過兩種方式來處理。先來看第一種,新創(chuàng)建一個 .js
文件,比如 event-bus.js
:
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
你需要做的只是引入 Vue 并導(dǎo)出它的一個實例(在這種情況下,我稱它為 EventBus
)。實質(zhì)上它是一個不具備 DOM 的組件,它具有的僅僅只是它實例方法而已,因此它非常的輕便。
另外一種方式,可以直接在項目中的 main.js
初始化 EventBus
:
// main.js Vue.prototype.$EventBus = new Vue()
注意,這種方式初始化的 EventBus
是一個 全局的事件總線 。稍后我們會花點時間專門聊一聊全局的事件總線。
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus
,接下來你需要做到的就是在你的組件中加載它,并且調(diào)用同一個方法,就如你在父子組件中互相傳遞消息一樣。
發(fā)送事件
假設(shè)你有兩個子組件: DecreaseCount
和 IncrementCount
,分別在按鈕中綁定了 decrease()
和 increment()
方法。這兩個方法做的事情很簡單,就是數(shù)值遞減(增) 1
,以及角度值遞減(增) 180
。在這兩個方法中,通過 EventBus.$emit(channel: string, callback(payload1,…))
監(jiān)聽 decreased
(和 incremented
)頻道。
<!-- DecreaseCount.vue --> <template> <button @click="decrease()">-</button> </template> <script> import { EventBus } from "../event-bus.js"; export default { name: "DecreaseCount", data() { return { num: 1, deg:180 }; }, methods: { decrease() { EventBus.$emit("decreased", { num:this.num, deg:this.deg }); } } }; </script> <!-- IncrementCount.vue --> <template> <button @click="increment()">+</button> </template> <script> import { EventBus } from "../event-bus.js"; export default { name: "IncrementCount", data() { return { num: 1, deg:180 }; }, methods: { increment() { EventBus.$emit("incremented", { num:this.num, deg:this.deg }); } } }; </script>
上面的示例,在 DecreaseCount
和 IncrementCount
分別發(fā)送出了 decreased
和 incremented
頻道。接下來,我們需要在另一個組件中接收這兩個事件,保持?jǐn)?shù)據(jù)在各組件之間的通訊。
接收事件
現(xiàn)在我們可以在組件 App.vue
中使用 EventBus.$on(channel: string, callback(payload1,…))
監(jiān)聽 DecreaseCount
和 IncrementCount
分別發(fā)送出了 decreased
和 incremented
頻道。
<!-- App.vue --> <template> <div id="app"> <div class="container" :style="{transform: 'rotateY(' + degValue + 'deg)'}"> <div class="front"> <div class="increment"> <IncrementCount /> </div> <div class="show-front"> {{fontCount}} </div> <div class="decrement"> <DecreaseCount /> </div> </div> <div class="back"> <div class="increment"> <IncrementCount /> </div> <div class="show-back"> {{backCount}} </div> <div class="decrement"> <DecreaseCount /> </div> </div> </div> </div> </template> <script> import IncrementCount from "./components/IncrementCount"; import DecreaseCount from "./components/DecreaseCount"; import { EventBus } from "./event-bus.js"; export default { name: "App", components: { IncrementCount, DecreaseCount }, data() { return { degValue:0, fontCount:0, backCount:0 }; }, mounted() { EventBus.$on("incremented", ({num,deg}) => { this.fontCount += num this.$nextTick(()=>{ this.backCount += num this.degValue += deg; }) }); EventBus.$on("decreased", ({num,deg}) => { this.fontCount -= num this.$nextTick(()=>{ this.backCount -= num this.degValue -= deg; }) }); } }; </script>
最終得到的效果如下:
最后用一張圖來描述示例中用到的 EventBus
之間的關(guān)系:
如果你只想監(jiān)聽一次事件的發(fā)生,可以使用 EventBus.$once(channel: string, callback(payload1,…))
。
移除事件監(jiān)聽者
如果想移除事件的監(jiān)聽,可以像下面這樣操作:
import { eventBus } from './event-bus.js' EventBus.$off('decreased', {})
你也可以使用 EventBus.$off(‘decreased’)
來移除應(yīng)用內(nèi)所有對此事件的監(jiān)聽?;蛘咧苯诱{(diào)用EventBus.$off()
來移除所有事件頻道, 注意不需要添加任何參數(shù) 。
上面就是 EventBus
的使用方式,是不是很簡單。上面的示例中我們也看到了,每次使用 EventBus
時都需要在各組件中引入 event-bus.js
。事實上,我們還可以通過別的方式,讓事情變得簡單一些。那就是創(chuàng)建一個全局的 EventBus
。接下來的示例向大家演示如何在Vue項目中創(chuàng)建一個全局的 EventBus
。
全局EventBus
全局EventBus,雖然在某些示例中不提倡使用,但它是一種非常漂亮且簡單的方法,可以跨組件之間共享數(shù)據(jù)。
它的工作原理是發(fā)布/訂閱方法,通常稱為 Pub/Sub
。
這整個方法可以看作是一種設(shè)計模式,因為如果你查看它周圍的東西,你會發(fā)現(xiàn)它更像是一種體系結(jié)構(gòu)解決方案。我們將使用普通的JavaScript,并創(chuàng)建兩個組件,并演示EventBus的工作方式。
讓我們看看下圖,并試著了解在這種情況下究竟發(fā)生了什么。
我們從上圖中可以得出以下幾點:
- 有一個全局EventBus
- 所有事件都訂閱它
- 所有組件也發(fā)布到它,訂閱組件獲得更新
- 總結(jié)一下。所有組件都能夠?qū)⑹录l(fā)布到總線,然后總線由另一個組件訂閱,然后訂閱它的組件將得到更新
在代碼中,我們將保持它非常小巧和簡潔。我們將它分為兩部分,將展示兩個組件以及生成事件總線的代碼。
創(chuàng)建全局EventBus
全局事件總線只不過是一個簡單的 vue
組件。代碼如下:
var EventBus = new Vue(); Object.defineProperties(Vue.prototype, { $bus: { get: function () { return EventBus } } })
現(xiàn)在,這個特定的總線使用兩個方法 $on
和 $emit
。一個用于創(chuàng)建發(fā)出的事件,它就是$emit
;另一個用于訂閱 $on
:
var EventBus = new Vue(); this.$bus.$emit('nameOfEvent',{ ... pass some event data ...}); this.$bus.$on('nameOfEvent',($event) => { // ... })
現(xiàn)在,我們創(chuàng)建兩個簡單的組件,以便最終得出結(jié)論。
接下來的這個示例中,我們創(chuàng)建了一個 ShowMessage
的組件用來顯示信息,另外創(chuàng)建一個 UpdateMessage
的組件,用來更新信息。
在 UpdateMessage
組件中觸發(fā)需要的事件。在這個示例中,將觸發(fā)一個 updateMessage
事件,這個事件發(fā)送了 updateMessage
的頻道:
<!-- UpdateMessage.vue --> <template> <div class="form"> <div class="form-control"> <input v-model="message" > <button @click="updateMessage()">更新消息</button> </div> </div> </template> <script> export default { name: "UpdateMessage", data() { return { message: "這是一條消息" }; }, methods: { updateMessage() { this.$bus.$emit("updateMessage", this.message); } }, beforeDestroy () { $this.$bus.$off('updateMessage') } }; </script>
同時在 ShowMessage
組件中監(jiān)聽該事件:
<!-- ShowMessage.vue --> <template> <div class="message"> <h1>{{ message }}</h1> </div> </template> <script> export default { name: "ShowMessage", data() { return { message: "我是一條消息" }; }, created() { var self = this this.$bus.$on('updateMessage', function(value) { self.updateMessage(value); }) }, methods: { updateMessage(value) { this.message = value } } }; </script><
最終的效果如下:
從上面的代碼中,我們可以看到 ShowMessage
組件偵聽一個名為 updateMessage
的特定事件,這個事件在組件實例化時被觸發(fā),或者你可以在創(chuàng)建組件時觸發(fā)。另一方面,我們有另一個組件UpdateMessage
,它有一個按鈕,當(dāng)有人點擊它時會發(fā)出一個事件。這導(dǎo)致訂閱組件偵聽發(fā)出的事件。這產(chǎn)生了 Pub/Sub
模型,該模型在兄弟姐妹之間持續(xù)存在并且非常容易實現(xiàn)。
總結(jié)
本文主要通過兩個實例學(xué)習(xí)了Vue中有關(guān)于 EventBus
相關(guān)的知識點。主要涉及了 EventBus
如何實例化,又是怎么通過 $emit
發(fā)送頻道信號,又是如何通過 $on
來接收頻道信號。最后簡單介紹了怎么創(chuàng)建全局的 EventBus
。從實例中我們可以了解到, EventBus
可以較好的實現(xiàn)兄弟組件之間的數(shù)據(jù)通訊。
以上就是vue篇之事件總線EventBus使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于vue事件總線EventBus的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue項目中按需引入element-ui的正確實現(xiàn)方法
這篇文章主要介紹了vue項目中按需引入element-ui的正確實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01ant-design-vue 時間選擇器賦值默認(rèn)時間的操作
這篇文章主要介紹了ant-design-vue 時間選擇器賦值默認(rèn)時間的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨過來看看吧2020-10-10Vue2.0父組件與子組件之間的事件發(fā)射與接收實例代碼
這篇文章主要介紹了Vue2.0父組件與子組件之間的事件發(fā)射與接收實例代碼,需要的朋友可以參考下2017-09-09