在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)聽事件。以下是如何在兩個組件中使用事件總線進(jì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>
三、詳細(xì)解釋
1、為什么使用事件總線
事件總線是一種輕量級的解決方案，用于在Vue組件之間進(jìn)行通信，尤其是在沒有直接父子關(guān)系的組件之間。它的主要優(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)管理的復(fù)雜應(yīng)用。
- Provide/Inject：適用于祖先和后代組件之間的通信。
- Composition API：通過組合函數(shù)共享邏輯。
四、實例說明
以下是一個完整的實例，展示了如何使用事件總線在兩個沒有直接關(guān)系的組件之間進(jìn)行通信。
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、在主應(yīng)用中使用組件
在 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>
到此這篇關(guān)于在Vue3中使用event bus(事件總線)的步驟詳解的文章就介紹到這了,更多相關(guān)Vue3使用event bus(事件總線)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
axios發(fā)送post請求springMVC接收不到參數(shù)的解決方法
下面小編就為大家分享一篇axios發(fā)送post請求springMVC接收不到參數(shù)的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了詳解用vue-cli來搭建vue項目和webpack，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
今天小編就為大家分享一篇vue里面使用mui的彈出日期選擇插件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中v-text / v-html使用實例代碼詳解,非常不錯，代碼簡單易懂，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue項目中v-model父子組件通信的實現(xiàn)詳解
vue.js，是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的庫。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。下面這篇文章主要給大家介紹了關(guān)于vue項目中v-model父子組件通信實現(xiàn)的相關(guān)資料，需要的朋友可以參考下。2017-12-12
這篇文章主要給大家介紹了關(guān)于vue打包后dist文件在本地啟動運(yùn)行的簡單步驟,文中通過代碼示例以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考價值,需要的朋友可以參考下2023-09-09
Vue使用wangEditor實現(xiàn)自定義粘貼功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用wangEditor實現(xiàn)自定義粘貼功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue組件與復(fù)用,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中post請求以a=a&b=b 的格式寫遇到的問題,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中本地靜態(tài)圖片的路徑應(yīng)該怎么寫,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10