字节笔记本字节笔记本

vue3 TypeScript 使用Bus总线

2022-04-01

在Vue3项目中使用TypeScript,通过在main.ts中引入mitt库创建全局$bus对象,并在组件中使用该对象进行事件的触发和监听。

vue3 TypeScript 使用Bus总线

\1. main.ts 引入

import mitt from "mitt"
app.config.globalProperties.$bus = mitt();

2.在传数据里

import {Emitter} from 'mitt'



const {ctx: $this}: any = getCurrentInstance();
const bus = $this.$bus as Emitter;





//排序
const sortFun = (sortCase: string) => {
  bus.emit('sortFun', sortCase)
}

3.在接数据里

import {Emitter} from 'mitt'


const {ctx: $this}: any = getCurrentInstance();
const bus = $this.$bus as Emitter;


onMounted(() => {
   bus.on('sortFun', (e) => {
     console.log(e)
   })
});