背景
在使用vue3.0做后台管理系统的过程中,需要实现兄弟组件间的通信,一个组件触发事件,另一个组件接收到事件后执行某操作
Vue3.0集成Bus
- Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线
- Vue3.0中使用emit来注册 bus.emit(‘事件’,参数)
- Vue3.0中使用on来监听,bus.on(‘taskLrowClick’, (e)=>{ console.log(e);其他的逻辑操作 })
- emit和on是成对出现的,一个发起,一个接收,并且接收方可以是多个组件,只要第一个参数匹配,都可以接收到
如何使用
可以在main.js里面全局引入,但是不建议全局引入,因为Vue3.0是通过getCurrentInstance 方法去获取组件实例来完成一些主要功能,但是大家不要依赖 getCurrentInstance 方法去获取组件实例来完成一些主要功能,否则在项目打包后,一定会报错的。
按需引入,那个组件需要就在哪里引入
1.安装mitt
npm install --save mitt
2.在src目录下创建utils文件夹文件夹下创建index.ts文件
3**.在使用bus的页面引入bus文件即可**
发布方
1.引入
2.发布
接收方
1.引入
2.接收
注意:接收方,最好写在onMounted里面,因为mounted自动执行,并且可以赋值给定义好的变量,以便于页面使用传递过来的数据