vue3 组件通信,vue3.0组件通信
本文主要介绍了Vue3使用mitt进行组件通信的步骤，帮助大家更好的理解和学习使用Vue。感兴趣的朋友可以了解一下。
:
目录
1.装置
2.将它引入到项目中并挂载它
使用
Vue2.x使用EventBus进行组件通信，而Vue3.x推荐mitt.js
和Vue实例上的EventBus相比，mitt.js好在哪里？首先，它足够小，只有200字节。其次，它支持所有事件的监控和批量删除。它不依赖于Vue实例，所以可以跨框架使用。React或Vue，甚至jQuery项目也可以使用同一套库。
1. 安装
推荐纱装(用了就知道有多滑了)
纱线添加手套
或者通过npm安装。
npm安装-保存mitt
2. 引入到项目并挂载
它可以在main.js中全局挂载
//标准ES模块化引入方法
从“mitt”导入mitt
const app=createApp(App)
//要安装在config.globalProperties上的vue3.x的全局实例
app . config . global properties . $ event bus=new mitt()
/common/EventBus.js:还可以封装一个ES模块，向外部公开一个Mitt实例。
从“mitt”导入mitt
导出默认新手套()
/views/Home.vue:业务模块介绍使用。
从“/common/EventBus.js”导入EventBus
3. 使用
由on监控/发射触发
/*
* App.vue
*/
//设置中没有这个。需要通过getCurrentInstance获取Vue实例。
从“vue”导入{ getCurrentInstance }
从“/common/Mp3Player.js”导入{ Mp3Player }
导出默认值{
setup(){
//ctx相当于Vue2.x的这个
const { ctx }=getCurrentInstance()
//Monitor-如果有新任务就播放音效
ctx。$EventBus.on(newTask ，data={
Mp3Player.play()
})
//还可以通过*监听所有任务
ctx。$EventBus.on(* ，data={
console.log(EventBus进来，数据)
})
}
}
/*
*控制. vue
*/
//判断有新任务时触发。
ctx。$EventBus.emit(newTask ，data)
关闭移除事件
导入{
onBeforeUnmount，
getCurrentInstance
}来自“vue”
导出默认值{
setup(){
const { ctx }=getCurrentInstance()
onBeforeUnmount(()={
//移除指定的事件
ctx。$EventBus.off(newTask )
//删除所有事件
ctx。$EventBus.all.clear()
})
}
}
以上是Vue3使用mitt进行组件通信的步骤细节。更多关于Vue3使用mitt进行组件通信的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。