Vue3中使用事件总线bus进行深层组件间的通讯

前言

vue3中prototype属性被取消了，不能再使用Vue2中的Vue.prototype.$bus=new Vue()方式来使用全局事件总线，目前在Vue3中推荐使用mitt这个第三方库去实现全局事件总线。

开始

1.安装mitt

推荐使用npm的方式去安装mitt

npm install mitt --save

2.封装bus.js

import mitt from 'mitt';

// 使用 Event Bus

const bus = mitt();

export default bus;

mitt主要有三个方法：

emit(name,data) 
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
on(name,callback) 
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
off(name) 
//解绑事件，一个参数：name：需要解绑的方法名

使用的比较多的是emit和on两种。

3.组件间使用

封装完成后使用方式其实跟vue2的事件总线差不多

在需要使用通讯的组件中，接与收组件都分别引入bus.js.例如我的封装文件放在untils目录下则可以：

import bus from '@/utils/bus';

引入完成后则可以在需要传递信息的组件去发送信息了，例如：

function loadProject(){
	bus.emit("getMore",'123')
}

同样要在需要接收信息的组件中去使用事件总线获取

接收方需要在组件的onMouted方法中去使用事件总线

onMounted(() => {
	bus.on("getMore",val=>{
		more()
	})
});

到这里两个组件间的通讯就完成了，如有不妥的地方希望大神指点指点，多多交流