vue2、vue3 eventbus实现组件间全局通信

vue2

//在main.js
Vue.prototype.$eventBus=new Vue();

//传值组件
this.$eventBus.$emit('eventTarget',data)//data是需要通信的数据

//接收组件
this.$eventBus.$on('eventTarget',(res)=>{
	console.log(res);//具体需要操作的方法
})
//移除监听（为了避免路由切换过程中造成事件多次被绑定，多次触发，需要在适当的时机 off 掉）
this.$eventBus.$off("eventTarget")

vue3
eventBus vue3中没有了，要自己写
bus.js：

class Bus {
    constructor() {
        this.list = {};  // 收集订阅
    }
    // 订阅
    $on(name, fn) {
        this.list[name] = this.list[name] || [];
        this.list[name].push(fn);
    }
    // 发布
    $emit(name, data) {
        if (this.list[name]) {
            this.list[name].forEach((fn) => {    fn(data);   });
        }
    }
    // 取消订阅
    $off(name) {
        if (this.list[name]) {
            delete this.list[name];
        }
    }
}
export default new Bus;

调用订阅

<template>
    <button @click="fabu">发布</button>
</template>
<script>
import Bus from '../eventBus/Bus.js'
export default {
  setup() {
     function fabu(){
        Bus.$emit('addAge',{age:'19'});
     }
   }
 }
</script>

监听和卸载订阅

<template>
  <div>
    {{ name }} --- {{ age }}
  </div>
</template>
<script>
import {ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
  setup() {
       const name = '张三';
       const age = ref(18)
       Bus.$on('addAge',({ num })=>{    age.value = num;    })//监听
        
       //组件卸载时，取消订阅
       onUnmounted( () => { Bus.$off('addAge') } )//卸载
       //在离开组件（onUnmounted）时 ，将注册进去的 ，订阅函数的数组删除，避免存放越来越多
    }
 }
</script>