使用插件

由于vue3中 “$ on”，$ off 和 $ once 实例方法已被移除，组件实例不再实现事件触发接口 所以我们可以使用官方推荐的这个第三方库实现同样的效果
mitt https://github.com/developit/mitt

安装

pnpm install mitt -S

挂载全局写法

main.ts 初始化
全局总线，vue 入口文件 main.js 中挂载全局属性

import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入animate动画
import 'animate.css';
//挂载事务总线
import mitt from 'mitt'
const app = createApp(App)
const miTT = mitt()
//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {export interface ComponentCustomProperties {$bus: typeof miTT}
}app.config.globalProperties.$bus = miTTapp.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

父组件

<template><A></A><B></B>
</template><script setup lang="ts">
import A from './components/A.vue'
import B from './components/B.vue'
</script><style scoped></style>

组件A

<template><div style="margin-right: 30px;"><h1>派发组件</h1><button @click="emitIndex">派发事件</button></div>
</template><script setup lang="ts">
import { getCurrentInstance } from 'vue'
// vue实例
const vm = getCurrentInstance();const emitIndex = () => {// self.console.log(123,vm)vm?.proxy?.$bus.emit('on-click', 1)}
</script><style scoped></style>

组件B

<template><div><h1>接收组件</h1><div>接收的值{{ bData }}</div></div></template><script setup lang="ts">import { getCurrentInstance,ref } from 'vue'const vm = getCurrentInstance()let bData = ref<Number>(0)vm?.proxy?.$bus.on('on-click', (num) => {bData.value += numconsole.log(num,'===========>B')})</script><style scoped></style>

效果如下

点击 按钮 b组件中的数值增加

监听所有事件（ on(“*”) ）

vm?.proxy?.$bus.on('*', (num) => {bData.value += numconsole.log(num,'===========>B')})

移除监听事件（off）

vm?.proxy?.$Bus.on('on-click',Fn)//listen
vm?.proxy?.$Bus.off('on-click',Fn)//unListen

清空所有监听（clear）

vm?.proxy?.$Bus.all.clear()