- Vue2.x使用EventBus进行组件通信,而Vue3.x推荐使用mitt.js。
- 比起Vue实例上的EventBus,mitt.js好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖Vue实例,所以可以跨框架使用,React或者Vue,甚至jQuery项目都能使用同一套库。
1. 安装
推荐使用yarn安装(用过都知道有多丝滑)
yarn add mitt
或者通过npm安装
npm install --save mitt
2. 引入到项目并挂载
可以在main.js
挂载到全局
// 标准的ES模块化引入方式 import mitt from 'mitt' const app = createApp(App) // vue3.x的全局实例,要挂载在config.globalProperties上 app.config.globalProperties.$EventBus = new mitt()
/common/EventBus.js
:也可以封装一个ES模块,对外暴露一个Mitt实例
import mitt from 'mitt' export default new mitt()
/views/Home.vue
:业务模块引入来使用
import EventBus from '/common/EventBus.js'
3. 使用
通过on监听/emit触发
/* * App.vue */ // setup中没有this,需要通过getCurrentInstance来获取Vue实例 import { getCurrentInstance } from 'vue' import { Mp3Player } from '/common/Mp3Player.js' export default { setup(){ // ctx等同于Vue2.x的this const { ctx } = getCurrentInstance() // 监听-如果有新任务则播放音效 ctx.$EventBus.on('newTask', data => { Mp3Player.play() }) // 也可以通过*监听所有任务 ctx.$EventBus.on('*', data => { console.log('EventBus come in', data) }) } } /* * Control.vue */ // 判断有新任务时,触发 ctx.$EventBus.emit('newTask', data)
off移除事件
import { onBeforeUnmount, getCurrentInstance } from 'vue' export default { setup(){ const { ctx } = getCurrentInstance() onBeforeUnmount(() => { // 移除指定事件 ctx.$EventBus.off('newTask') // 移除全部事件 ctx.$EventBus.all.clear() }) } }
以上就是Vue3使用mitt进行组件通信的步骤的详细内容,更多关于Vue3 用mitt进行组件通信的资料请关注自学编程网其它相关文章!
- 本文固定链接: https://zxbcw.cn/post/211403/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)