Vue3使用mitt進(jìn)行組件通信的步驟
更新時(shí)間：2021年05月06日 10:41:49 作者：梁同學(xué)de自言自語
這篇文章主要介紹了Vue3使用mitt進(jìn)行組件通信的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
- Vue2.x使用EventBus進(jìn)行組件通信，而Vue3.x推薦使用mitt.js。
- 比起Vue實(shí)例上的EventBus，mitt.js好在哪里呢？首先它足夠小，僅有200bytes，其次支持全部事件的監(jiān)聽和批量移除，它還不依賴Vue實(shí)例，所以可以跨框架使用，React或者Vue，甚至jQuery項(xiàng)目都能使用同一套庫。
1. 安裝
推薦使用yarn安裝（用過都知道有多絲滑）
yarn add mitt
或者通過npm安裝
npm install --save mitt
2. 引入到項(xiàng)目并掛載
可以在main.js掛載到全局
// 標(biāo)準(zhǔn)的ES模塊化引入方式 import mitt from 'mitt' const app = createApp(App) // vue3.x的全局實(shí)例，要掛載在config.globalProperties上 app.config.globalProperties.$EventBus = new mitt()
/common/EventBus.js：也可以封裝一個(gè)ES模塊，對(duì)外暴露一個(gè)Mitt實(shí)例
import mitt from 'mitt' export default new mitt()
/views/Home.vue：業(yè)務(wù)模塊引入來使用
import EventBus from '/common/EventBus.js'
3. 使用
通過on監(jiān)聽/emit觸發(fā)
/*
* App.vue
*/
// setup中沒有this，需要通過getCurrentInstance來獲取Vue實(shí)例
import { getCurrentInstance } from 'vue'
import { Mp3Player } from '/common/Mp3Player.js'
export default {
setup(){
// ctx等同于Vue2.x的this
const { ctx } = getCurrentInstance()
// 監(jiān)聽-如果有新任務(wù)則播放音效
ctx.$EventBus.on('newTask', data => {
Mp3Player.play()
})
// 也可以通過*監(jiān)聽所有任務(wù)
ctx.$EventBus.on('*', data => {
console.log('EventBus come in', data)
})
}
}
/*
* Control.vue
*/
// 判斷有新任務(wù)時(shí)，觸發(fā)
ctx.$EventBus.emit('newTask', data)
off移除事件
import {
onBeforeUnmount,
getCurrentInstance
} from 'vue'
export default {
setup(){
const { ctx } = getCurrentInstance()
onBeforeUnmount(() => {
// 移除指定事件
ctx.$EventBus.off('newTask')
// 移除全部事件
ctx.$EventBus.all.clear()
})
}
}
以上就是Vue3使用mitt進(jìn)行組件通信的步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue3 用mitt進(jìn)行組件通信的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue如何獲取new Date().getTime()時(shí)間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級(jí)時(shí)間戳,而PHP后端則是秒級(jí)時(shí)間戳,處理此類問題時(shí),需要將PHP的時(shí)間戳乘以1000轉(zhuǎn)換為毫秒級(jí),以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10
vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
頁面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)（推薦）
這篇文章主要介紹了頁面內(nèi)錨點(diǎn)定位及跳轉(zhuǎn)方法總結(jié)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
滑塊驗(yàn)證是比較常見的人機(jī)鑒別的方法，本文主要介紹了Vue集成阿里云做滑塊驗(yàn)證，具有一定的參考價(jià)值，感興趣的可以了解一下2022-01-01
Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)拖放效果的實(shí)例的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
這篇文章主要幫助大家簡單的理解vue中track-by屬性,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了基于vue配置axios的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn)
tsconfig.json文件中指定了用來編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng),本文就來介紹一下Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn),感興趣的可以了解一下2023-08-08
用Vue.js實(shí)現(xiàn)監(jiān)聽屬性的變化
響應(yīng)系統(tǒng)是Vue.js的一個(gè)顯著功能，修改屬性，可以更新視圖，這讓狀態(tài)管理變得非常簡單且直觀。這篇文章主要給大家介紹如何利用Vue.js實(shí)現(xiàn)觀察屬性的變化，有需要的朋友們可以參考借鑒，感興趣的朋友們下面來一起看看吧。2016-11-11
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎(chǔ)的服務(wù),學(xué)習(xí)一段時(shí)間,對(duì)遇到的需求進(jìn)行一些總結(jié)。需要的朋友可以參考下2018-07-07