Mitt是一个事件订阅/发布库，相当于Vue3中的全局事件总线。这个库需要通过npm install mitt安装
使用方法：
- 在main.ts中引入并调用，配置好扩展声明
main.ts
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import mitt from 'mitt'
const Mit = mitt()
// 拓展d.ts获取代码提示，配置错误会出现“不存在该属性”的情况
declare module 'vue' {
export interface ComponentCustomProperties {
$Bus: typeof Mit
}
}
export const app = createApp(App)
// 将Mit挂载到全局对象中
app.config.globalProperties.$Bus = Mit
app.mount('#app')
- 在组件A中使用（注意不能直接引入app，app身上并没有Mit）
A.vue
<template></template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
// 获取当前组件实例
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 获取实例身上的$Bus对象,定义事件执行回调，第一个参数是事件名，第二个是执行的方法函数
instance?.proxy?.$Bus.on('on-click', params => {
console.log('收到了', params)
})
</script>
<style scoped></style>
- 在组件B中使用，方法同A相似
<template>
<input v-model="message" type="text">
<button @click="emit">点我向A组件传递数据</button>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
// 获取当前组件实例
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
let message = ref<string>()
const emit = () => {
// 获取实例身上的$Bus对象,定义触发事件回调，第一个是事件名，第二个是要传给执行方法的参数
instance?.proxy?.$Bus.emit('on-click',message.value)
}
</script>
<style scoped>
</style>- 在App.vue中引入这两个组件以挂载至页面
B.vue
<template>
<A></A>
<B></B>
</template>
<script setup lang='ts'>
import { ref,reactive } from 'vue'
import A from './components/A.vue';
import B from './components/B.vue';
</script>
<style scoped>
</style>App.vue
- 完成效果：
