快捷導(dǎo)航

vue3使用mitt.js實(shí)現(xiàn)各種組件間的通信

更新時(shí)間：2024年05月21日 10:21:46 作者：A-超

在vue工程中,除開(kāi)vue自帶的什么父子間,祖孫間通信,還有一個(gè)非常方便的通信方式,類似Vue2.x?使用?EventBus?進(jìn)行組件通信,而?Vue3.x?推薦使用?mitt.js,可以實(shí)現(xiàn)各個(gè)組件間的通信,所以本文給大家介紹了vue3使用mitt.js實(shí)現(xiàn)組件通信,需要的朋友可以參考下

引言

我們?cè)趘ue工程中，除開(kāi)vue自帶的什么父子間，祖孫間通信，還有一個(gè)非常方便的通信方式，類似Vue2.x 使用 EventBus 進(jìn)行組件通信，而 Vue3.x 推薦使用 mitt.js?？梢詫?shí)現(xiàn)各個(gè)組件間的通信

優(yōu)點(diǎn)：首先它足夠小，僅有200bytes，其次支持全部事件的監(jiān)聽(tīng)和批量移除，它還不依賴 Vue 實(shí)例，所以可以跨框架使用

1、在項(xiàng)目中引入mitt.js

npm install --save mitt

2、在項(xiàng)目中自定義ts文件引入并暴露mitt.js

我這里是在新建文件夾utils下新建文件命名app-events.ts

//app-events.ts文檔
/**
 * 業(yè)務(wù)中跨域調(diào)用、解決耦合問(wèn)題
 */
import mitt from 'mitt'
const AppEvents = mitt()
export default AppEvents

3、使用mitt.js

(1)在組件branchAside.vue，傳輸參數(shù)給組件 fileAside.vue （這兩個(gè)組件可以沒(méi)任何關(guān)系）

在組件branchAside.vue里面mitt.js使用如下：

聲明方法和傳參數(shù)

<script lang="ts" setup>
 
import AppEvents from '@/utils/app-events' //引入mitt.js
 
// 調(diào)用nameFn方法就可以觸發(fā)
const nameFn = (item: string='test') => {
// AppEvents.emit('自定義名字', 參數(shù))
  AppEvents.emit('sideOpen', item) //使用emit傳送方法名字和參數(shù)
}
 
</script>

（2）在組件 fileAside.vue里面接受方法和參數(shù)：

<script lang="ts" setup>
import { onBeforeUnmount, onMounted } from 'vue'  // 引入頁(yè)面初始化的生命周期和銷毀的生命周期
import AppEvents from '@/utils/app-events' // 引入mitt.js
 
 
//在頁(yè)面初始生命周期，通過(guò)on監(jiān)聽(tīng)方法和接受參數(shù)
onMounted(() => {
//AppEvents.on('方法名字',(val:any)=>{console.log('接收到的參數(shù)-->', val)})
 
  AppEvents.on('sideOpen', (val: any) => {
    console.log('mitt---->', val)
  })
})
 
 
// 頁(yè)面銷毀，通過(guò)off注銷該自定義命名的方法
onBeforeUnmount(() => {
  AppEvents.off('sideOpen')
})
</script>

拓展知識(shí)：vue3中mitt.js使用方法

由于在vue3.0中移除了vue實(shí)例的$on(), $off()方法，所以，在vue3.0取而代之的是用mitt.js第三方庫(kù)來(lái)實(shí)現(xiàn)平行組件間的通信，其特點(diǎn)是小巧，輕量。

在vue2中我們通過(guò)事件總線eventBus,來(lái)實(shí)現(xiàn)兩個(gè)平行組件之間的通信：

bus.js

import Vue from 'vue'
// 創(chuàng)建vue實(shí)例
const Bus = new Vue()
export default Bus

在具體的組件中：
A.vue

import Bus from './bus.js'
// 發(fā)布一個(gè)事件
Bus.$emit('sendData', {name: 'Jack',age: 20})

B.vue

import Bus from './bus.js'
// 訂閱一個(gè)事件
Bus.on('sendData', (param) => {
	console.log(param)
})

main.js vue入口文件, 或者直接將bus實(shí)例掛在在vue的原型上：

import Vue from 'vue'
const Bus = new Vue()
Vue.prototype.$Bus = Bus

那么，在vue3我們也可以通過(guò)mitt.js來(lái)實(shí)現(xiàn)兩個(gè)平行組件之間的通信
首先安裝：npm install --save mitt在項(xiàng)目src目錄下新建一個(gè)

mitt.js

文件

import mitt from 'mitt'
// 創(chuàng)建mitt實(shí)例
const emitter = mitt()
// 導(dǎo)出
export default emitter

在具體的組件實(shí)例中：
A.vue

import emitter from '@/mitt.js'
// 發(fā)布一個(gè)事件,并傳遞參數(shù)
emitter.emit('sendData', {name: 'David', 'age': 20})

B.vue

import emitter from '@/mitt.js'
// 發(fā)布一個(gè)事件,并傳遞參數(shù)
emitter.on('sendData', (param) => {
	console.log(param)
})

// main.js
import emitter from '@/mitt.js'
app.config.globalProperties.$emitter = emitter

那么在vue3 setup 語(yǔ)法中：

const { getCurrentInstance } from 'vue'
const proxy = getCurrentInstance() // 返回vue的實(shí)例
proxy.$emitter.on('foo', e => console.log(e)) // 訂閱事件
proxy.$emitter.emit('foo', {a: b}) // 發(fā)布事件

到此這篇關(guān)于vue3使用mitt.js實(shí)現(xiàn)各種組件間的通信的文章就介紹到這了,更多相關(guān)vue3 mitt.js組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: