在Vue3中使用event?bus(事件總線)的步驟詳解
一、創(chuàng)建事件總線
在Vue 3中，創(chuàng)建事件總線的方式與Vue 2有所不同。Vue 3不再直接使用Vue實例作為事件總線，而是使用一個空的對象或使用 mitt 庫。下面是如何創(chuàng)建一個簡單的事件總線：
// bus.js import mitt from 'mitt'; const emitter = mitt(); export default emitter;
二、在組件中使用事件總線
創(chuàng)建好事件總線后，可以在組件中引入并使用它來觸發(fā)和監(jiān)聽事件。以下是如何在兩個組件中使用事件總線進行通信的示例：
1、在發(fā)送事件的組件中
// SenderComponent.vue
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import emitter from './bus';
export default {
methods: {
sendMessage() {
emitter.emit('message', 'Hello from SenderComponent');
}
}
}
</script>
三、詳細解釋
1、為什么使用事件總線
事件總線是一種輕量級的解決方案，用于在Vue組件之間進行通信，尤其是在沒有直接父子關系的組件之間。它的主要優(yōu)勢包括：
- 簡潔：只需要一個簡單的對象或庫即可實現(xiàn)。
- 靈活：可以在任何地方觸發(fā)和監(jiān)聽事件。
- 低耦合：組件之間不需要知道彼此的存在。
2、使用mitt庫的優(yōu)勢
在Vue 3中，推薦使用 mitt 庫來創(chuàng)建事件總線，因為它更輕量、性能更好，而且與Vue 3的Composition API兼容。mitt庫的主要優(yōu)點包括：
- 輕量級：只有幾百字節(jié)大小。
- 簡單易用：API非常簡潔，只有
emit和on等少數(shù)幾個方法。 - 性能優(yōu)越：由于其實現(xiàn)簡單，性能開銷極低。
3、Vue 3中事件總線的替代方案
- Vuex：適用于需要全局狀態(tài)管理的復雜應用。
- Provide/Inject：適用于祖先和后代組件之間的通信。
- Composition API：通過組合函數(shù)共享邏輯。
四、實例說明
以下是一個完整的實例，展示了如何使用事件總線在兩個沒有直接關系的組件之間進行通信。
1、創(chuàng)建一個新的Vue項目
首先，創(chuàng)建一個新的Vue 3項目：
npm init vue@latest
按照提示創(chuàng)建項目后，安裝 mitt 庫：
npm install mitt
2、創(chuàng)建事件總線
在項目根目錄下創(chuàng)建一個 bus.js 文件，并添加如下代碼：
import mitt from 'mitt'; const emitter = mitt(); export default emitter;
3、發(fā)送事件的組件
在 src/components 目錄下創(chuàng)建一個 SenderComponent.vue 文件，并添加如下代碼：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
import emitter from '../bus';
export default {
methods: {
sendMessage() {
emitter.emit('message', 'Hello from SenderComponent');
}
}
}
</script>4、接收事件的組件
在 src/components 目錄下創(chuàng)建一個 ReceiverComponent.vue 文件，并添加如下代碼：
<template>
<div>
<p>Received Message: {{ message }}</p>
</div>
</template>
<script>
import emitter from '../bus';
export default {
data() {
return {
message: ''
}
},
mounted() {
emitter.on('message', (msg) => {
this.message = msg;
});
},
beforeUnmount() {
emitter.off('message');
}
}
</script>
5、在主應用中使用組件
在 src/App.vue 文件中，添加如下代碼：
<template>
<div id="app">
<SenderComponent />
<ReceiverComponent />
</div>
</template>
<script>
import SenderComponent from './components/SenderComponent.vue';
import ReceiverComponent from './components/ReceiverComponent.vue';
export default {
components: {
SenderComponent,
ReceiverComponent
}
}
</script>
到此這篇關于在Vue3中使用event bus(事件總線)的步驟詳解的文章就介紹到這了,更多相關Vue3使用event bus(事件總線)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了vue如何使用原生高德地圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法
今天小編就為大家分享一篇vue單頁應用在頁面刷新時保留狀態(tài)數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于element-ui對話框el-dialog初始化的校驗問題解決
這篇文章主要介紹了基于element-ui對話框el-dialog初始化的校驗問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vuex中的state、getters、mutations、actions之間的關系解讀
這篇文章主要介紹了vuex中的state、getters、mutations、actions之間的關系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了SpringBoot+Vue 前后端合并部署的配置方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue3中的createApp分析,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章給大家介紹基于vue實現(xiàn)循環(huán)滾動列表功能，給大家介紹了該組件的用法，通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-09-09
Vue.js的核心包括一套“響應式系統(tǒng)”。“響應式”，是指當數(shù)據(jù)改變后，Vue會通知到使用該數(shù)據(jù)的代碼。例如，視圖渲染中使用了數(shù)據(jù)，數(shù)據(jù)改變后，視圖也會自動更新。2021-05-05
Vue和SpringBoot之間傳遞時間的方法實現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時間的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
在vue+element-plus中無法同時使用v-for和v-if的問題及解決方法
由于路由中存在不需要遍歷的數(shù)據(jù)所以像用v-if來過濾，但是報錯，百度說vue不能同時使用v-if和v-for，今天小編給大家分享解決方式，感興趣的朋友跟隨小編一起看看吧2023-07-07