vue3使用mitt.js进行各种组件间通信

我们在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>