Vue事件总线EventBus

最新推荐文章于 2024-06-10 17:19:45 发布
最新推荐文章于 2024-06-10 17:19:45 发布
阅读量409 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sally18/article/details/119139903
版权

前言

Vue组件中父子组件通信，兄弟组件通信都很常见，而父子组件通信就很简单，父组件会通过props向下传递数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件，那么如果说两个页面没有任何引入与被引入的关系，改如何通信呢？

如果咱们的应用程序不需要Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即EventBus来通信

EventBus简介

EventBus 又称为事件总线，在Vue中可以使用 EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以㢟都可以上下平行地通知其他组件，但也就是太方便了，所以使用不慎，就会造成难以维护的“灾难””，因此才需要Vuex作为状态管理中心，将通知的概念上升到共享状态层次

如何使用EventBus？

1.基本使用，引入eventBus

 2.发送事件

3.接收事件 

 前面提到过，如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。（小项目eventBus,大中项目Vuex）

3.移除事件监听者、

A-fish
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 事件总线EventBus的概念、使用以及注意点
aaaa123456789111的博客
07-19 2897
vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件；子传父通过$emit发送事件，并携带数据给父组件。而有时两个组件之间毫无关系，或者他们之间的结构复杂，如何传递数据呢？这时就要用到 vue 中的事件总线 EventBus的概念EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件，如图：废话不多说，直接开始使用EventBus要用EventBus，首先要初始化一个EventBus，这里称它为全局事件总线。 第二种初始化方
Vue-中央事件总线（bus）
qq_56973906的博客
09-09 3479
通过创建一个新的vm对象,专门统一注册事件,供所有组件共同操作,达到所有组件随意隔代传值的效果也就是：各个组件内部要传输的数据或者要执行的命令信息，靠bus来通信。我们知道子组件向父组件传值可以通过将自定义事件的方法来进行，那么如果我们把事件绑定在所有组件都能访问的地方，然后想要给某个组件通信，直接触发这个事件。//1.触发x组件的a事件: x.$emit("a事件",参数...)//2.给x组件绑定a事件 x.$on("a事件",监听器函数)
如何在Vue3中使用事件总线实现跨组件通信？
最新发布
有我更精彩的博客
06-10 1354
事件总线（Event Bus）可以理解为一个全局的发布/订阅模式，可以通过它来实现不同组件之间的消息传递。在Vue实例或Vue组件中充当一个中央枢纽，通过它可以让一个组件发出事件，而其他组件监听并响应这些事件。
Vue事件总线（EventBus）使用指南：详细解析与实战应用
热门推荐
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-31 1万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
EventBus注销的必要性，用实例说明为什么EventBus用完必须注销
StaticMan的博客
02-07 5667
我们知道eventbus非粘性订阅事件在退出时都需要进行注销，否则会出现异常。那么到底会出现什么异常呢？下面我们用具体的实例来看一下。
聊一聊如何在Vue中使用事件总线（ Event Bus）进行组件间通信
前端达人
10-19 1463
事件总线模式允许不同的组件之间进行通信。它要求一个中央枢纽，组件可以通过它发送和接收事件，从而使组件之间的数据交换和交互更加顺畅。本文探讨了它的使用方法，以便开发人员能够充分利用它在Vue开发中的潜力。跨通信是应用程序中组件之间的交互。这有助于应用程序的不同部分之间的顺畅协作。其重要性体现在以下几个方面：数据共享：跨组件通信确保组件之间的数据高效交换。处理事件：它帮助它们更新状态并触发必要的事件。...
在Uni中使用Vue的EventBus总线机制操作
10-15
在Vue开发中，有时我们需要在不直接存在父子或兄弟关系的组件之间传递数据，这时可以利用EventBus（事件总线）这一技术。EventBus是一种轻量级的通信方式，它基于Vue实例，允许我们在不同组件之间共享数据和触发事件...
Vue EventBus自定义组件事件传递
08-27
`EventBus`是一种轻量级的事件总线，它其实就是一个新的Vue实例。通过这个实例，我们可以发布（$emit）和订阅（$on）事件，从而在不直接依赖父组件或子组件关系的情况下，实现组件间的通信。这在处理非父子组件之间...
Vue组件通信eventbus封装-构造函数方式.zip
08-02
这个压缩包文件"Vue组件通信eventbus封装-构造函数方式.zip"内包含了一个名为`EventBus2.js`的文件，很显然，它是对Vue事件总线的一种实现，使用了构造函数的方式。 首先，我们要理解什么是EventBus。EventBus是一...
Vue组件通信eventbus封装-类方式.zip
08-02
Vue官方提供了多种通信方式，如props、Vuex状态管理、事件总线(Event Bus)等。本教程主要关注的是使用Event Bus进行组件间通信的类方式封装。 Event Bus，又称自定义事件，是一种轻量级的通信机制，它通过创建一个...
Vue系列状态管理篇--Bus事件总线篇
pig_is_duck的博客
03-20 325
Bus – 事件总线 原理：创建一个空的Vue实例，来作为交互的中介 1、创建事件总线 新建一个文件夹bus，在文件夹中新建一个文件 bus.js (也可以不要) 在文件 bus.js 建立以下代码 import Vue from 'vue' const Bus = new Vue() export default Bus 3. 在 main.js 导入 bus.js ​`...
Vuejs的事件总线bus
08-08
Vue.js的事件总线bus
2021-11-04 学习记录--Vue-事件总线（EventBus）和Vuex的区别
weixin_48850734的博客
11-04 2054
一、事件总线和Vuex的区别 一、事件总线（EventBus） 事件总线是所有组件公用滴事件中心，可以向该中心： 发送事件【通过this.$bus.$emit('事件名');】 　或　 接收事件【通过this.$bus.$on('事件名',() => {})】 1、全局事件总线 【举例：假如有首页Home.vue、组件Scroll.vue、组件GoodsList.vue、组件GoodsListItem.vue，它们之间的关系被我用一张图展示出来： 】 第一步、初始化 在main.js中进行初始化：
Vue之状态管理的简单使用（事件总线（Event Bus），Vuex和若依前端示例）
weixin_42949219的博客
01-31 1094
使用事件总线（Event Bus）或通过 Vuex 进行状态管理。这两种方法都可以实现在异步操作完成后通知Vue组件执行特定的方法。
Vue BUS总线
qq_42345237的博客
12-22 3488
Vue Bus 总线 作用：在vue中实现非父子组件之间通信。 场景：bus适合小项目、数据被更少组件使用，或者数据量少的项目。 本质：实际上是一个发布订阅者模式的使用，利用 vue 的自定义事件机制，在触发时通过 $emit 向外发布一个事件，而在需要使用的页面，通过 $on 监听事件或者说是注册事件。是一个不具备DOM的组件。它就像是所有组件共用相同的事件中心，用它来作为沟通桥梁，可以向该中心注册发送事件或接收事件。 实现： 使用一个空的 Vue 实例(bus.js)作为中央事件总线。 // bus
事件总线（EventBus）,父子、兄弟组件间通信，一个页面调用另一个页面的方法 & 使用eventbus遇到的问题（多次触发、第一次不触发）
金乌的博客
11-25 3743
组件通信时，有时两个组件之间毫无关系，或者他们之间的结构复杂，这时就要用到 vue 中的事件总线 EventBus的概念。EventBus 又称为事件总线。EventBus的用途：1.解决一个页面调用另一个页面的方法2.解决父子组件、兄弟组件间的通信。
vuex状态管理\事件总线EventBus
weixin_44253902的博客
08-05 379
1.为什么要有状态管理？？ 答：大型应用往往有多个组件封装而成，会遇到多个组件共享状态的情况，单向数据流的简洁性被破坏。主要问题为：1.多个视图依赖同一状态；2.不同试图的行为需要改变同一状态。 2.使用： ①安装好vuex ②创建一个store仓库，仓库中包括：state（状态），mutations（方法），module（可以将仓库分模块）； ③同注册路由方式一样，将store挂载到vue实例中； ④在其他组件中调用状态和方法:this.$store.state.prop调用特定的状态；thi
EventBus & Vuex?
weixin_34228617的博客
12-07 2902
前几天有盆友在群里问,vue.$emit和$on可以跨组件完成全局通信，那岂不是可以完全代替vuex，为啥还要用vuex呢。 这个问题就要从eventbu事件总线s和vuex起源说起了。 (趁着尤大的vue3.0还在路上，我们来炒炒现饭) 组件通信 在很久很久以前，在Vue王国里有一个组件塔，有一个组件家族，A,B,C，组件父亲A和儿子B,C生活在不同的层级之间,他们相隔非常远。 父->子 ...
vue事件总线EventBus(兄弟组件之间的传值)
qq_53061847的博客
09-13 2245
EventBus又称为事件总线，相当于一个全局的仓库，任何组件都可以在这个仓库里面获取事件。
vue组件传参eventbus
08-24
对于Vue组件之间的通信，可以使用事件总线（EventBus）来传递参数。下面是一个使用EventBus传递参数的示例： 首先，在你的Vue项目中创建一个新的文件，例如event-bus.js，用于创建和导出一个EventBus实例： ```javascript import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; ``` 然后，在需要传递参数的组件中，可以使用EventBus来触发事件并传递参数： ```javascript import EventBus from '@/event-bus.js'; export default { methods: { sendMessage() { const message = 'Hello!'; EventBus.$emit('messageSent', message); }, }, }; ``` 在接收参数的组件中，可以使用EventBus来监听事件并获取传递的参数： ```javascript import EventBus from '@/event-bus.js'; export default { created() { EventBus.$on('messageSent', (message) => { console.log(message); // 输出 'Hello!' }); }, }; ``` 通过以上方式，你可以在Vue组件之间传递参数，实现组件间的通信。请注意，在使用EventBus时，确保正确导入和使用EventBus实例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值