Vue3使用mitt进行组件通信的步骤

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 mitt2. 引入到项目并挂载

可以在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进行组件通信的资料请关注好吧啦网其它相关文章！