vue篇之事件總線EventBus使用示例詳解
正文
許多現(xiàn)代JavaScript框架和庫(kù)的核心概念是能夠?qū)?shù)據(jù)和UI封裝在模塊化、可重用的組件中。這對(duì)于開(kāi)發(fā)人員可以在開(kāi)發(fā)整個(gè)應(yīng)用程序時(shí)避免使用編寫(xiě)大量重復(fù)的代碼。
雖然這樣做非常有用，但也涉及到組件之間的數(shù)據(jù)通訊。在Vue中同樣有這樣的概念存在。通過(guò)前面一段時(shí)間的學(xué)習(xí)，Vue組件數(shù)據(jù)通訊常常會(huì)有父子組件，兄弟組件之間的數(shù)據(jù)通訊。也就是說(shuō)在Vue中組件通訊有一定的原則。
父子組件通訊原則
為了提高組件的獨(dú)立性與重用性，父組件會(huì)通過(guò) props 向下傳數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過(guò) $emit 事件告訴父組件。如此確保每個(gè)組件都是獨(dú)立在相對(duì)隔離的環(huán)境中運(yùn)行，可以大幅提高組件的維護(hù)性。
在《Vue組件通訊》一文中有詳細(xì)介紹過(guò)這部分。但這套通訊原則對(duì)于兄弟組件之間的數(shù)據(jù)通訊就有一定的詬病。當(dāng)然，在Vue中有其他的方式來(lái)處理兄弟組件之間的數(shù)據(jù)通訊，比如Vuex這樣的庫(kù)。但在很多情況之下，咱們的應(yīng)用程序不需要類似Vuex這樣的庫(kù)來(lái)處理組件之間的數(shù)據(jù)通訊，而可以考慮Vue中的 事件總線 ，即 **EventBus **。
接下來(lái)的內(nèi)容，就是來(lái)一起學(xué)習(xí)Vue中的 EventBus 相關(guān)的知識(shí)點(diǎn)。
EventBus的簡(jiǎn)介
EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來(lái)作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊(cè)發(fā)送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會(huì)造成難以維護(hù)的災(zāi)難，因此才需要更完善的Vuex作為狀態(tài)管理中心，將通知的概念上升到共享狀態(tài)層次。
如何使用EventBus
在Vue的項(xiàng)目中怎么使用 EventBus 來(lái)實(shí)現(xiàn)組件之間的數(shù)據(jù)通訊呢？具體可以通過(guò)下面幾個(gè)步驟來(lái)完成。
初始化
首先你需要做的是創(chuàng)建事件總線并將其導(dǎo)出，以便其它模塊可以使用或者監(jiān)聽(tīng)它。我們可以通過(guò)兩種方式來(lái)處理。先來(lái)看第一種，新創(chuàng)建一個(gè) .js 文件，比如 event-bus.js ：
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
你需要做的只是引入 Vue 并導(dǎo)出它的一個(gè)實(shí)例（在這種情況下，我稱它為 EventBus ）。實(shí)質(zhì)上它是一個(gè)不具備 DOM 的組件，它具有的僅僅只是它實(shí)例方法而已，因此它非常的輕便。
另外一種方式，可以直接在項(xiàng)目中的 main.js 初始化 EventBus ：
// main.js Vue.prototype.$EventBus = new Vue()
注意，這種方式初始化的 EventBus 是一個(gè) 全局的事件總線 。稍后我們會(huì)花點(diǎn)時(shí)間專門(mén)聊一聊全局的事件總線。
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ，接下來(lái)你需要做到的就是在你的組件中加載它，并且調(diào)用同一個(gè)方法，就如你在父子組件中互相傳遞消息一樣。
發(fā)送事件
假設(shè)你有兩個(gè)子組件： DecreaseCount 和 IncrementCount ，分別在按鈕中綁定了 decrease()和 increment() 方法。這兩個(gè)方法做的事情很簡(jiǎn)單，就是數(shù)值遞減（增） 1 ，以及角度值遞減（增） 180 。在這兩個(gè)方法中，通過(guò) EventBus.$emit(channel: string, callback(payload1,…)) 監(jiān)聽(tīng) 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頻道。接下來(lái)，我們需要在另一個(gè)組件中接收這兩個(gè)事件，保持?jǐn)?shù)據(jù)在各組件之間的通訊。
接收事件
現(xiàn)在我們可以在組件 App.vue 中使用 EventBus.$on(channel: string, callback(payload1,…))監(jiān)聽(tīng) 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>
最終得到的效果如下：
最后用一張圖來(lái)描述示例中用到的 EventBus 之間的關(guān)系：
如果你只想監(jiān)聽(tīng)一次事件的發(fā)生，可以使用 EventBus.$once(channel: string, callback(payload1,…)) 。
移除事件監(jiān)聽(tīng)者
如果想移除事件的監(jiān)聽(tīng)，可以像下面這樣操作：
import { eventBus } from './event-bus.js'
EventBus.$off('decreased', {})
你也可以使用 EventBus.$off(‘decreased’) 來(lái)移除應(yīng)用內(nèi)所有對(duì)此事件的監(jiān)聽(tīng)?；蛘咧苯诱{(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
全局EventBus，雖然在某些示例中不提倡使用，但它是一種非常漂亮且簡(jiǎn)單的方法，可以跨組件之間共享數(shù)據(jù)。
它的工作原理是發(fā)布/訂閱方法，通常稱為 Pub/Sub 。
這整個(gè)方法可以看作是一種設(shè)計(jì)模式，因?yàn)槿绻悴榭此車臇|西，你會(huì)發(fā)現(xiàn)它更像是一種體系結(jié)構(gòu)解決方案。我們將使用普通的JavaScript，并創(chuàng)建兩個(gè)組件，并演示EventBus的工作方式。
讓我們看看下圖，并試著了解在這種情況下究竟發(fā)生了什么。
我們從上圖中可以得出以下幾點(diǎn)：
- 有一個(gè)全局EventBus
- 所有事件都訂閱它
- 所有組件也發(fā)布到它，訂閱組件獲得更新
- 總結(jié)一下。所有組件都能夠?qū)⑹录l(fā)布到總線，然后總線由另一個(gè)組件訂閱，然后訂閱它的組件將得到更新
在代碼中，我們將保持它非常小巧和簡(jiǎn)潔。我們將它分為兩部分，將展示兩個(gè)組件以及生成事件總線的代碼。
創(chuàng)建全局EventBus
全局事件總線只不過(guò)是一個(gè)簡(jiǎn)單的 vue 組件。代碼如下：
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
現(xiàn)在，這個(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) => {
// ...
})
現(xiàn)在，我們創(chuàng)建兩個(gè)簡(jiǎn)單的組件，以便最終得出結(jié)論。
接下來(lái)的這個(gè)示例中，我們創(chuàng)建了一個(gè) ShowMessage 的組件用來(lái)顯示信息，另外創(chuàng)建一個(gè) UpdateMessage 的組件，用來(lái)更新信息。
在 UpdateMessage 組件中觸發(fā)需要的事件。在這個(gè)示例中，將觸發(fā)一個(gè) updateMessage 事件，這個(gè)事件發(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>
同時(shí)在 ShowMessage 組件中監(jiān)聽(tīng)該事件：
<!-- 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 組件偵聽(tīng)一個(gè)名為 updateMessage 的特定事件，這個(gè)事件在組件實(shí)例化時(shí)被觸發(fā)，或者你可以在創(chuàng)建組件時(shí)觸發(fā)。另一方面，我們有另一個(gè)組件UpdateMessage ，它有一個(gè)按鈕，當(dāng)有人點(diǎn)擊它時(shí)會(huì)發(fā)出一個(gè)事件。這導(dǎo)致訂閱組件偵聽(tīng)發(fā)出的事件。這產(chǎn)生了 Pub/Sub 模型，該模型在兄弟姐妹之間持續(xù)存在并且非常容易實(shí)現(xiàn)。
總結(jié)
本文主要通過(guò)兩個(gè)實(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ù)通訊。
以上就是vue篇之事件總線EventBus使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue事件總線EventBus的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開(kāi)
這篇文章主要介紹了Vue使用Element折疊面板Collapse如何設(shè)置默認(rèn)全部展開(kāi)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法
這篇文章主要介紹了vue項(xiàng)目中按需引入element-ui的正確實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了基于VUE的v-charts的曲線顯示功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
vue父組件向子組件動(dòng)態(tài)傳值的兩種方法
這篇文章主要介紹了vue父組件向子組件動(dòng)態(tài)傳值的兩種方法 ,需要的朋友可以參考下2017-11-11
ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作
這篇文章主要介紹了ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨過(guò)來(lái)看看吧2020-10-10
Vue Router去掉url中默認(rèn)的錨點(diǎn)#
vue-router默認(rèn)hash模式——使用URL的hash來(lái)模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁(yè)面不會(huì)重新加載。這篇文章主要介紹了Vue Router去掉url中默認(rèn)的錨點(diǎn)#,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼
這篇文章主要介紹了Vue2.0父組件與子組件之間的事件發(fā)射與接收實(shí)例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要詳細(xì)介紹了在vue3中如何選取頭像并裁剪，文章中有詳細(xì)的代碼示例，需要的朋友可以參考閱讀2023-04-04
這篇文章給大家介紹了Vue.js 表單控件操作的相關(guān)知識(shí)，本文通過(guò)實(shí)例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03