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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 Vite项目中使用插件 @rollup/plugin-inject 注入全局 jQuery的过程详解
在一次项目脚手架升级的过程中，将之前基于 webpack 搭建的项目移植到 Vite 构建，这篇文章主要介绍了在 Vite项目中，使用插件 @rollup/plugin-inject 注入全局 jQuery,需要的朋友可以参考下2022-12-12
关于vue3默认把所有onSomething当作v-on事件绑定的思考
这篇文章主要介绍了关于vue3默认把所有`onSomething`当作`v-on`事件绑定的思考,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了聊聊Vue中provide/inject的应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在Vue.js应用中,动态表单是一个常见的需求,尤其是当表单字段的数量和类型需要根据用户输入或系统状态动态变化时,本文将详细介绍如何在Vue中实现动态表单的创建,并通过多个示例展示具体的实现方法,需要的朋友可以参考下2024-09-09
近期学习vue3的父子组件之间的传值,发现跟vue2的并没有太大的区别,这篇文章主要给大家介绍了关于Vue3子组件向父组件传值的两种实现方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要给大家介绍了关于前端开发利器Vite完整版详解的相关资料,Vite是一种基于ES模块的开发服务器和构建工具,专为现代化的前端开发而设计,需要的朋友可以参考下2023-11-11
本文以click为例给大家介绍vue.js中常用v-指令，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript代码，本文通过示例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2021-10-10
这篇文章主要介绍了vue2.0 中#$emit,$on的使用详解,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了通过vue刷新左侧菜单栏操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue3中Element-Plus分页(Pagination)组件的使用
Element-Plus分页(Pagination)组件在开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中,下面我们就来学习一下它的具体使用,需要的可以参考一下2023-11-11
最新评论