vue3使用mitt.js实现各种组件间的通信

npm install --save mitt

//app-events.ts文档
/**
 * 业务中跨域调用、解决耦合问题
 */
import mitt from 'mitt'
const AppEvents = mitt()
export default AppEvents

<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>

<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>

import Vue from 'vue'
// 创建vue实例
const Bus = new Vue()
export default Bus

import Bus from './bus.js'
// 发布一个事件
Bus.$emit('sendData', {name: 'Jack',age: 20})

import Bus from './bus.js'
// 订阅一个事件
Bus.on('sendData', (param) => {
	console.log(param)
})

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

import mitt from 'mitt'
// 创建mitt实例
const emitter = mitt()
// 导出
export default emitter

import emitter from '@/mitt.js'
// 发布一个事件,并传递参数
emitter.emit('sendData', {name: 'David', 'age': 20})

import emitter from '@/mitt.js'
// 发布一个事件,并传递参数
emitter.on('sendData', (param) => {
	console.log(param)
})

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

const { getCurrentInstance } from 'vue'
const proxy = getCurrentInstance() // 返回vue的实例
proxy.$emitter.on('foo', e => console.log(e)) // 订阅事件
proxy.$emitter.emit('foo', {a: b}) // 发布事件