Vue3使用mitt进行组件通信的步骤
短信预约 -IT技能 免费直播动态提醒
- 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触发
// 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)
})
}
}
// 判断有新任务时，触发
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进行组件通信的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
