安装mitt库

npm install --save mitt

编写UseMitt.ts文件

在setup语法糖中，如果在父组件中使用const emitter = mitt(),那么子组件无法接收，所以新建一个UseMitt.ts文件，在这个文件中使用const emitter = mitt()并导出 UseMitt.ts文件

import mitt from 'mitt';
export const emitter = mitt();

父组件中导入emitter

导入emitter并注册事件，在组件卸载后要记得注销这个事件

<template>
  <div>
    <LocalComponent >

    </LocalComponent>

  </div>
</template>
<script setup lang="ts">
import LocalComponent from "../components/component/LocalComponent.vue";
import {emitter} from '../hooks/UseMitt';//导入emitter
import { onUnmounted } from "vue";

const callback = (test:string) => {
  console.log(test);
}
// 注册事件
emitter.on('testEvent',callback);
// 组件卸载时，注销事件
onUnmounted(() => {
  emitter.off('testEvent',callback)
})
</script>

子组件导入emitter并且触发事件

<template>
    <div>
        <div>this is a LocalComponent</div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import {emitter} from '../../hooks/UseMitt';

onMounted(() => {//在子组件挂载完毕后，触发父组件注册的事件
    emitter.emit('testEvent',123);
});
</script>

使用新版mitt时报出类型错误的解决方案 5-11 使用新版 mitt 时报出类型错误的解决方案_慕课网 (imooc.com)