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>