Vue2中Vue.prototype.$bus = new Vue()，Vue3使用mitt替代eventBus

写项目用BetterScroll遇到一个高度计算错误的问题，官方解答
BetterScroll 的“疑难杂症” | BetterScroll 2.0 (better-scroll.github.io)
需要用到refresh方法，里面还涉及到非父子组件通信问题，视频中老师用的Vue2

代码在main.js中如下

Vue.prototype.$bus = new Vue()

我用的是Vue3，但是在Vue3中，方法改变了（因为$on方法的废弃，需要用到mitt）
解决方法为先安装：

npm i mitt --save

在src下加bus.js

import mitt from "mitt";

const bus = {}
const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

然后在main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import bus from "./bus";


const app = createApp(App)
app.config.globalProperties.$bus = bus
app.use(router).mount('#app')

即可正常使用$bus.$emit去提交

imageLoad(){
      this.$bus.$emit('itemImageLoad');
    }

然后使用$bus.on 去获取

this.$bus.$on('itemImageLoad', () => {
    refresh()
});

• this.bus.emit('事件名称', 参数)【发送】
• this.bus.on('事件名称', 回调函数(参数))【接收并监听】

后面还可以再加入防抖debounce操作

主要参考文章：
Vue3使用Mitt替代EventBus - 知乎 (zhihu.com)
以及vue3定义全局变量方法变更及$on废弃 - BillBie - 博客园 (cnblogs.com)