背景

在使用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自动执行,并且可以赋值给定义好的变量,以便于页面使用传递过来的数据

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐