Vue3中使用 EventBus 实现兄弟组件传参

前言：EventBus vue3中没有了，EventBus，所以我们要自己写，但是非常简单。

步骤一：创建（EventBus 容器）

在src目录，创建个bus文件夹，存放 自己建立的 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;

步骤二：创建（发布者）

调用订阅 并且传参数   记住：需要引入Bus.js文件

  Bus.$emit('userinfo',this.users);

发布后，在订阅者的组件就会执行，注意对应的发布和订阅的name 要一样

步骤三：创建（订阅者）

发布之后开始执行  记住：也是需要引入Bus.js文件

mounted() {
    Bus.$on("userinfo", (userinfo) => {
      this.userinfo = userinfo;
    });
  },

完整代码：

父组件：

兄弟组件1 （发送方）：

兄弟组件2 （接受方）：

最终效果：