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)文章
這篇文章主要介紹了vant?toast?關(guān)閉棧溢出問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2021-12-12
Vue如何監(jiān)測(cè)數(shù)組類型數(shù)據(jù)發(fā)生改變的(推薦)
這篇文章主要介紹了Vue如何監(jiān)測(cè)數(shù)組類型數(shù)據(jù)發(fā)生改變的,本文通過實(shí)例代碼圖文詳解給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法
今天小編就為大家分享一篇在VUE中實(shí)現(xiàn)文件下載并判斷狀態(tài)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue數(shù)據(jù)雙向綁定的實(shí)現(xiàn)方式講解
Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式，把data對(duì)象里每個(gè)數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當(dāng)數(shù)據(jù)變化時(shí)通知視圖更新2022-08-08
這篇文章主要為大家介紹了vue3中element的Form表單用法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
axios+Vue實(shí)現(xiàn)上傳文件顯示進(jìn)度功能
這篇文章主要介紹了axios+Vue上傳文件顯示進(jìn)度效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Pinia是Vue3的狀態(tài)管理工具,安裝后在入口文件引入,定義store并在組件中使用,本文主要介紹了Vue3中如何使用pinia實(shí)現(xiàn)持久化,需要的可以參考下2024-11-11
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06