Vue3使用mitt进行组件通信的步骤
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue3使用mitt进行组件通信的步骤，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下
- 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进行组件通信的资料请关注狼蚁SEO其它相关文章！