vue3实现全局事件总线

1、vue3中使用全局事件总线是变化最大的。在vue2中，我们在new Vue中在beforeCreate钩子函数中使用vue.prototype.$bus=this来创建全局事件总线。vue3中我需要借助第三方库来完成创建全局事件总线。
2、安装依赖

npm i mitt -s

3、封装event-bus.js文件

import mitt from 'mitt';
export default mitt();

4、在main.js中注册

import emitter from '../../utils/event-bus';

app.config.globalProperties.$baseEventBus = emitter; //全局事件总线

或者
此方式不用封装event-bus.js文件

import mitt from 'mitt';

app.config.globalProperties.$baseEventBus = mitt(); //全局事件总线

5、使用

this.$baseEventBus.on('deliveryApplicationInform', this.loadTableList);  //监听
this.$baseEventBus.off('deliveryApplicationInform', this.loadTableList);//释放
this.$baseEventBus.emit('deliveryApplicationInform', {});//发送

注意：如果是setup方式的话，在全局变量获取baseEventBus，获取全局变量方式如下：

<script setup>
import { getCurrentInstance } from 'vue'
 
 
const app = getCurrentInstance()
const website = app.appContext.config.globalProperties.$website
console.log(website)
 
// 或者
const { proxy } = getCurrentInstance()
console.log(proxy.$website)
 
// 使用解构赋值
const { $web } = getCurrentInstance()!.appContext.config.globalProperties
console.log($web)
 
 
 
/**注意！getCurrentInstance()不能在回调函数、方法里使用**/
//若要访问全局变量，需在函数外面调用getCurrentInstance()
const { proxy } = getCurrentInstance()
//或者
const name = getCurrentInstance().proxy.$website;
const getUserInfo=()=>{
   console.log(proxy.$website);
   console.log(name);
}
 
</script>