vue3中事件总线mitt代码实例(第三方库mitt)
更新时间：2023年09月18日 08:40:35 作者：摩羯柚子
这篇文章主要给大家介绍了关于vue3中事件总线mitt(第三方库mitt)的相关资料,Mitt是一个在Vue.js应用程序中使用的小型事件总线库,该库允许组件进行通信,而不必过度依赖父级或子级组件之间的props,需要的朋友可以参考下
1.安装mitt：npm install mitt -save
2. 新建EventBus.js文件：
// 事件总线第三方库： import mitt from 'mitt'; const bus = mitt(); export default bus;
3.发出事件的页面：bb.vue
<template>
<div class="box">
<h2>小b页面视图</h2>
<button @click="sendData">局部事件总线：点击之后给cc页面传递一个值</button>
</div>
</template>
<script setup>
import bus from "../utils/EventBus"
// import {ref} from "vue"
const sendData = () => {
bus.emit("data",18)
}
</script>
<style>
.box{
text-align: left;
}
</style4.接收事件的页面：dd.vue
<template>
<div>
<h2>小d页面视图</h2>
</div>
</template>
<script setup>
import bus from "../utils/EventBus"
import { ref ,onMounted} from "vue";
onMounted(()=>{
bus.on("data",(info)=>{
console.log("dd页面接收到的值：",info)
})
})
</script>5.点击bb页面按钮：
总结
到此这篇关于vue3中事件总线mitt的文章就介绍到这了,更多相关vue3事件总线mitt内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 格式化银行卡（信用卡）每4位一个符号隔断的问题，本文给大家分享了解决方法,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue3循环展示图片实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-05-05
这篇文章主要为大家详细介绍了vue-cropper组件实现图片切割上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
今天小编就为大家分享一篇vue+vue-router转场动画的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
图片预览插件vue-photo-preview的使用示例详解
这篇文章主要介绍了图片预览插件vue-photo-preview的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-08-08
这篇文章主要介绍了应用provide与inject刷新Vue页面的两种方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，多多进步，祝大家早日升职加薪2021-09-09
开发vue项目的时候一般都会开发很多自定义的全局组件,下面这篇文章主要给大家总结介绍了关于VUE中常用的四种高级方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧2024-01-01
这篇文章主要介绍了vue实现动态显示与隐藏底部导航的方法,结合实例形式分析了vue.js针对导航隐藏与显示的路由配置、事件监听等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要通过示例和大家一起浅析一下Vue3的响应式原理，文中的示例代码讲解详细，对我们学习Vue3有一定帮助，需要的可以参考一下2022-08-08
最新评论