vue3+ts使用bus事件总线的示例代码_vue.js_

//创建一个vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; //在main.js中引入 import vueBus from '@/utils/vueBus'; Vue.use(vueBus); //可根据this.$bus._events['事件名'] 来查看是否存在该事件监听

//在vue3中需要使用mitt插件，直接下载即可 //创建vueBus.ts文件 const init_mitt = mitt() const emitter:any = { _events:{}, $emit:init_mitt.emit, $on:function(t:any,e:any){ this._events[t] = true init_mitt.on(t,e) }, $off:function(t:any,e:any){ delete this._events[t] init_mitt.off(t,e) } } export default emitter //在main.ts中引入使用 import emitter from '@/utils/vueBus'; app.config.globalProperties.$bus = emitter //如果需要挂在其他的全局变量上，需要到声明文件声明

// utils - bus.js import Vue from 'vue' const bus = new Vue() export default bus

import bus from '@/utils/bus'

us.$emit('message', 'hello');

import bus from '@/utils/bus'

bus.$on('message', (e) => {  console.log(e) })

import bus from '@/utils/bus' mounted () {   bus.$on('testA', this.testA)  }, testA () {  console.log('由A组件调用') }

import bus from '@/utils/bus' mounted () {  bus.$emit('testA') }