9.（vue3.x+vite）组件间通信方式之EventBus

已于 2023-09-19 16:58:24 修改
阅读量128 收藏 2
点赞数 2
分类专栏： 前端技术社区 文章标签： vue.js 前端 javascript vue3.x+vite vue3 EventBus
于 2023-09-18 10:33:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60387551/article/details/132967308
版权
前端技术社区 专栏收录该内容
40 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏

前端技术社区总目录（订阅之前请先查看该博客）

示例效果

在这里插入图片描述

EventBus的简介

EventBus 又称为事件总线。是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都通知到其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”。
其具体的思路就是实例化一个空白的Vue，并通过其提供的$ on、$ once、$ emit方法来进行通信。而在Vue3中，上述三个API已经被移除了，借助轻量Mitt库实现

一、引入mitt库

npm i mitt

二、初始化

//初始化mitt
import mitt from "mitt&#
了解本专栏 订阅专栏 解锁全文
GIS之家家长
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
7.（vue3.x+vite）组件间通信方式之vuex
地图之家
10-23 113
7.（vue3.x+vite）组件间通信方式之vuex
9.（vue3.x+vite）组件间通信方式之EventBus.rar
09-19
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
Vue事件总线（EventBus）使用指南：详细解析与实战应用
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 8723
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
Vue3全局组件通信之EventBus
最新发布
weixin_50684359的博客
01-03 1101
【代码】Vue3全局组件通信之EventBus。
Vue组件传值—eventBus
weixin_46214344的博客
10-19 1692
Vue组件之间传值——eventBus前言一、eventBus简介二、eventBus使用三、清除事件eventBus四、例子结尾 前言 在vue中，组件之间传值是非常重要的，这关系到整个项目是否能正常运行，是否合乎逻辑，而在vue中，组件之间的传值方法有很多种,例如：prop、vuex、evenBus等。 因为我个人目前只理解了用evenBus进行传值，所以我就说一下我对于evenBus传值的理解。 一、eventBus简介 eventBus（事件总线），实质就是创建一个vue实例，通过一个空的vue实例
Vue3 实现Event-Bus事件总线 （mitt插件）
黄彪博客
06-09 2297
Vue3 没有像Vue2那样创建一个Vue实例作为事件传递的对象( 参考。两个属性下面引入的自定义的声明文件。
Vue中 EventBus 的使用，如何实现Vue中的EventBus
热门推荐
程邓楠的博客
02-20 1万+
vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下 一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...
Vite+Vue3EventBus,provide数据共享
可可的博客
09-15 514
provide响应式数据。大范围修改数据vuex。
Vue3中全局事件总线enentBus使用教程
kakaai77的博客
06-27 1098
在vue2中我们可以通过全局事件总线来进行任意组件的数据传递，也可以说是发送消息，全局事件总线中需要满足两个条件，其中要包含emit和on，还有就是所有组件中都需要能访问到，我们在Vue的原型对象上增加了一个全局变量，busVueprototypebus，将Vue对象指向了bus，这样我们就可以通过emit和on来进行数据的发送和接收了，但Vue3中删除了on、$off等方法，推荐使用mitt方案。
三、vue3学习笔记：状态管理bus的使用
miracleoa的博客
09-08 1707
文章目录一、子组件和父组件通信：二、兄弟组件如何通信：三、两页面组件之间的通信：3.1 两页面组件之间的通信3.2 $on拓展：单页面监听拓展文档： 一、子组件和父组件通信： src/components/AInput.vue <template> <input @input="handleInput" :value="value"> </template&g...
14.（vue3.x+vite）组件间通信方式之pinia.rar
09-20
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
8.（vue3.x+vite）组件间通信方式之window挂实例.rar
09-18
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
16.（vue3.x+vite）组件间通信方式之具名插槽.rar
09-20
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
7.（vue3.x+vite）组件间通信方式之vuex.rar
09-18
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
10.（vue3.x+vite）组件间通信方式之props与$emit
GIS之家家长
09-18 107
10.（vue3.x+vite）组件间通信方式之props与$emit
14.（vue3.x+vite）组件间通信方式之pinia
地图之家
11-22 345
14.（vue3.x+vite）组件间通信方式之pinia
vue3组件通信父子 子父 兄弟 子孙 组件间通信一站解决
weixin_44166849的博客
06-19 182
vue3组件通信一站解决 一站解救vue3组件通信 一篇搞定 vue3组件通信父子 子父 兄弟 子孙 组件间通信一站解决
11.（vue3.x+vite）组件间通信方式之ref与$parent、$children
地图之家
11-08 287
11.（vue3.x+vite）组件间通信方式之ref与$parent、$children
vite+vue3+ts组件通信
m0_51431448的博客
08-24 1124
这里就以setup语法糖来介绍，因为毕竟setup语法糖还是更方便些嘛。
vue3+ts+vite组件components
08-28
对于使用 Vue 3、TypeScript 和 Vite 构建组件的项目，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Node.js 和 npm（或者 yarn）。 2. 创建一个新的项目文件夹，并在该文件夹中打开终端。 3. 初始化项目并生成 package.json 文件： ```bash npm init -y ``` 4. 安装 Vue 3 的依赖： ```bash npm install vue@next ``` 或者，如果你使用 yarn： ```bash yarn add vue@next ``` 5. 安装 Vite： ```bash npm install -D vite ``` 或者，如果你使用 yarn： ```bash yarn add -D vite ``` 6. 创建一个 `src` 文件夹，并在其中创建你的 Vue 组件。例如，你可以在 `src` 文件夹中创建一个名为 `MyComponent.vue` 的文件，并编写你的组件代码。 7. 在项目根目录创建一个 `vite.config.js` 文件，并配置 Vite 的构建选项。例如，你可以将以下内容添加到 `vite.config.js` 文件中： ```javascript module.exports = { // ... } ``` 8. 在 `package.json` 中添加脚本命令以启动 Vite 服务器和构建项目。编辑 `package.json` 文件并将以下内容添加到 `"scripts"` 部分： ```json "scripts": { "dev": "vite", "build": "vite build" } ``` 9. 运行以下命令启动 Vite 服务器： ```bash npm run dev ``` 或者，如果你使用 yarn： ```bash yarn dev ``` 这将启动一个本地开发服务器，你可以在浏览器中查看你的组件。 10. 如果想要构建项目，运行以下命令： ```bash npm run build ``` 或者，如果你使用 yarn： ```bash yarn build ``` 这将生成一个优化后的生产环境输出。 这样，你就可以使用 Vue 3、TypeScript 和 Vite 来构建你的组件了。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS之家家长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值