vue3.0与vue2.0中使用事务总线

vue3.0与vue2.0中使用事务总线

vue2.0的事务总线通过创建一个空vue来注册（$emit）和监听（$on）实现，但升级到3.0后，取消了$on、$off、$once，只保留了$emit，因此在3.0中我们只能另寻他法，官方推荐使用第三方库mitt来进行实现：
（1）vue2.0事务总线实现方式
新建bus.js文件

import Vue from 'vue';
export default new Vue();

在main.js中全局注册

import Bus from '@/utils/bus';
Vue.prototype.$bus = Bus;

使用

methods:{
	setDate() {
		this.$bus.$emit('setDate', '2021-08-04')
	}
},
mounted() {
	this.$bus.$on('setDate', (date) => {
		console.log(date); // => 打印结果：2021-08-04
	}
}

（2）vue3.0事务总线实现方式
安装第三方库mitt

npm install --save mitt

新建bus.js

import mitt from "mitt"
const bus = new mitt()
export default bus;

使用

import $bus from '@/utils/bus'
export default defineComponent({
  setup() {
    onMounted(() => {
      $bus.on('aa',(v)=>{
        alert(1)
      });
    })
    const editHandle = (item) => {
      $bus.emit('aa');
    }
    return {
      editHandle
    }
  }
})