vue的事件总线基本理解

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

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

初始化事件总线可以使它初始化为一个Vue的实例即可

在一个组件使用this.$bus.$emit进行发射需要监听的事件

在另外需要监听事件的组件使用this.$bus.$on来监听发射出来的事件

xiangyizhixuexi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue事件总线插件监听在线/离线更改-JavaScript开发
05-26
vue-connection-listener Vue事件总线插件侦听在线/离线更改关于每当导航器的连接状态更改时，都会发出带有布尔有效载荷的“连接”事件，该负载指示新的st vue-connection-listener Vue事件总线插件侦听在线/离线...
vue2 事件总线思维图
最新发布
01-27
vue2 事件总线思维图
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 1135
Vue2 bus事件总线的原理与使用
vue之事件总线
Jack, what else can you do besides holding your little darling?
10-25 351
1.事件总线介绍 在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。 2.事件总线原理 事件总线可以用一个对象来表示每一个事件 都有一个数组来记录这个事件的监听者 { "event1": [hander1, hander2], "event2": [hander1, hander2, hander3], } 1，若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去 2，若给某个事
Vue事件总线以及原理探究
BeSentimental的博客
08-05 1304
一、引入事件总线 只需在main.js的创建Vue实例vm之前的时候引入 首先，原理是使用Vue创造的实例vm或者说VueComponent创建的实例vc身上的$on和$emit属性，两者作用的实例必须为同一个，根据这个原理可以写出几种创建事件总线的方法： 第一种方法，你可以在VueComponent的实例对象身上创建： 在入口文件main.js中，可以在new Vue({})（创建Vue实例vm）之前这样写 在这里说一下，在main.js 中无法直接获取VueComponent构造函数，Vue的源码里是通
【Vue全局事件总线详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-05 1万+
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。
eventBus的原理
mz929的博客
07-16 461
Vue中的EventBus是一种事件总线，用于在组件之间进行通信。它的原理是通过创建一个全局的Vue实例作为中央事件总线，其他组件可以通过该实例来订阅和发布事件。这种机制可以实现不同组件之间的解耦，使得组件之间可以方便地进行通信和数据传递。但同时也需要注意避免滥用EventBus，因为过多的全局事件会导致代码维护和调试困难。2.在传递数据的组件中通过。3.在接收数据组件中通过。EventBus的使用。
vue总线机制(bus)知识点详解
01-19
vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。 bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅...
Vue组件通信中央事件总线实例
09-28
介绍Vue组件之间的通信方式，本资源主要是介绍中央事件总线这种模式，代码中详细示范了如何使用中央事件总线来通信
Vue事件总线插件用于侦听在线离线变化
08-10
Vue事件总线插件用于侦听在线/离线变化
Vue事件处理原理及过程详解
11-21
Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难，使用v-on有以下好处： 1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法。 2、无须在JS里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。 3、当一个ViewModel被销毁时，所有的事件处理器都会自动被删除，无须担心自己如何清理它们。 事件处理步骤 1. 绑定监视 2. 事件修饰符 3. 按键修饰符 代码如下 <!DOCTY
什么是Vue中的事件总线机制（EventBus）
bug处理进行时
06-06 2663
Vue事件总线机制 - EventBus 事件总线产生的背景 在vue中最核心的部分就是组件，组件间的通信就是重中之重。通信分为父子组件通信、兄弟组件通信、不相干的组件通信等等多种方式。父级向子级通过props传递数据，子级通过 $emit 向父组件通知事件。但是当两个毫不相关的组件互相通信时应该通过什么来实现呢？ EventBus的简介 EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以
Vue事件总线
Xwz的博客
04-18 6057
1.常见的组件通信方式 pros:父组件传子组件 自定义事件:子组件传父组件 vuex:均可实现 插槽:父组件传子组件 pubsub-js:均可实现（较少用） $bus全局事件总线:均可实现 2.事件总线的介绍 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线来实现。塔相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件,它就类似沟通桥梁的概念...
vue2.x框架里面的事件总线eventBus的原理解析
峰会路转的博客
07-23 470
emit,$off事件了，从而就可以进行组件特别是兄弟组件之间的数据传递了！今天我们不讲怎么使用这个，主要记录下怎么实现这个总线的原理！态发生改变时，所有依赖于它的对象都将得到通知。发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状。今天的总结就到此结束，有不足的地方可以提出大家互相学习~~~vuejs2.x里面的事件总线大家因该都会用了。上面还没有取消订阅的方法，我们再改进下。上面的方法不能传递参数，我们再改进下。然后我们就就可以获取到实例上的。来替代传统的发布—订阅模式。.
8种vue组件通信方式详细解析实例
weixin_33946020的博客
04-10 121
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue事件总线（EventBus）使用详细介绍
infotw的博客
07-16 4304
前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。 Event...
什么是Vue事件总线（EventBus）
m0_58974838的博客
07-19 9936
1.事件总线的介绍 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。而eventBus又称事件总线。在Vue中可以使用eventBus作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行的通知其他组件。 事件总线也是一种通信方式，只不过它的功能比较强大，不在局限于父传子或兄弟组件之间通信，它可以跨组件通信，通过事件
Vue组件通信原理剖析（一）事件总线的基石 $on和$emit
没做过产品的后端不是个好前端
12-10 1308
首先我们先从一个面试题入手。 面试官问： “Vue中组件通信的常用方式有哪些？” 我答： 1. props 2. 自定义事件 3. eventbus 4. vuex 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$attrs、$listeners 面试官追问：“那你能分别说说他们的原理吗？” 我：[一脸懵逼]???? 下面我们就来一一看看他们内部的奥秘！ props 解决问题：父给子传值 // ch
vue篇之事件总线（EventBus）
u011286552的博客
04-22 532
参考文章：https://www.jianshu.com/p/4fa3bf211785 许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之...
vue事件总线的缺点
08-01
回答: vue事件总线的缺点主要有以下几点。首先，由于事件总线是一个全局的对象，所以在大型项目中容易出现命名冲突的问题，即不同组件使用相同的事件名称可能会导致意外的触发。其次，事件总线的使用可能会导致代码...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值