vue2,vue3全局事件总线的使用

vue2 的全局事件总线

1. vue2中一般在生命周期beforeCreate创建一个全局事件总线：$bus

   new Vue({
   	...
   	beforeCreate() {
   		Vue.prototype.$bus = this
   	}
   }).$mount()
   

2. 然后在项目使用即可

   this.$bus.on('useBus', function(data) {
   	console.log(data)
   })
   this.$bus.emit('useBus', '111')
   

vue3 的全局事件总线

1. 从官方中看到了2个库，mitt和tiny-emitter
   

2. 查看2个库，此处我用mitt来测试一下，在git下有使用的案例
   

3. 在项目中使用案例，发现只有在同一界面生效，所以需要添加一个全局配置
   在mian.js中
   引用：import mitt from 'mitt'
   添加：app.config.globalProperties.$bus = mitt()
   

4. 在项目使用
   引用：import { getCurrentInstance } from "vue";
   使用：

   const { proxy } = getCurrentInstance()
   proxy.$bus.on('foo', e => console.log('foo', e))
   proxy.$bus.emit('foo', '11')
   

   

5. 项目测试结果：