我們在vue工程中，除開vue自帶的什么父子間，祖孫間通信，還有一個非常方便的通信方式，類似Vue2.x 使用 EventBus 進行組件通信，而 Vue3.x 推薦使用 mitt.js。可以實現各個組件間的通信

優點：首先它足夠小，僅有200bytes，其次支持全部事件的監聽和批量移除，它還不依賴 Vue 實例，所以可以跨框架使用

1、在項目中引入mitt.js

npm install --save mitt

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

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

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

3、使用mitt.js

(1)在組件branchAside.vue，傳輸參數給組件?fileAside.vue （這兩個組件可以沒任何關系）

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

聲明方法和傳參數

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

（2）在組件?fileAside.vue里面接受方法和參數：

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