vue的事件总线基本理解

最新推荐文章于 2024-03-23 09:47:01 发布
最新推荐文章于 2024-03-23 09:47:01 发布
阅读量107 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangyizhixuexi/article/details/118970819
版权
EventBus是Vue中的一种组件间通信方式，它作为一个全局事件中心，允许组件通过$emit发射事件和$on监听事件进行通信。然而，过度依赖EventBus可能导致代码难以维护，这时Vuex作为状态管理工具提供了更好的解决方案，将通信提升到共享状态的层次。初始化EventBus只需创建一个Vue实例，组件内使用$emit发射事件，$on监听事件。
摘要由CSDN通过智能技术生成

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

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

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

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

xiangyizhixuexi
关注
vue源码分析-事件机制
yyzzabc123的博客
10-27 170
点击传递信息给父组件
如何在 JavaScript 中实现事件总线 （Event Bus）
zsevgymko的博客
03-12 542
原文：https://dushusir.com/js-event-bus/ 介绍 Event Bus 事件总线，通常作为多个模块间的通信机制，相当于一个事件管理中心，一个模块发送消息，其它模块接受消息，就达到了通信的作用。 比如，Vue 组件间的数据传递可以使用一个 Event Bus 来通信，也可以用作微内核插件系统中的插件和核心通信。 原理 Event Bus 本质上是采用了发布-订阅的设计模式，比如多个模块 A、B、C 订阅了一个事件 EventX，然后某一个模块 X 在事件总线发布了这个事件，那么事
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事件总线
codingWeb的博客
01-30 414
相邻组件之间可以通过this.$emit(‘xxx’)触发父组件的事件并且传递参数 那么隔着多个组件，如果一步到位，触发对方的事件并且传递参数呢？ Vue.prototype.$bus= new Vue(); //main.js中，在vue原型上挂载 this.$ bus.$on('dataFromA', function (data) { }); // 一般在m...
vue之事件总线
Jack, what else can you do besides holding your little darling?
10-25 379
1.事件总线介绍 在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。 2.事件总线原理 事件总线可以用一个对象来表示每一个事件 都有一个数组来记录这个事件的监听者 { "event1": [hander1, hander2], "event2": [hander1, hander2, hander3], } 1，若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去 2，若给某个事
Vue事件总线以及原理探究
BeSentimental的博客
08-05 1348
一、引入事件总线 只需在main.js的创建Vue实例vm之前的时候引入 首先，原理是使用Vue创造的实例vm或者说VueComponent创建的实例vc身上的$on和$emit属性，两者作用的实例必须为同一个，根据这个原理可以写出几种创建事件总线的方法： 第一种方法，你可以在VueComponent的实例对象身上创建： 在入口文件main.js中，可以在new Vue({})（创建Vue实例vm）之前这样写 在这里说一下，在main.js 中无法直接获取VueComponent构造函数，Vue的源码里是通
8种vue组件通信方式详细解析实例
weixin_33946020的博客
04-10 128
2019独角兽企业重金招聘Python工程师标准>>> ...
vue基本内容总结学习
07-01
### Vue.js 基本内容总结学习 #### 一、组件之间的通信 ##### 1.1 父子组件之间的通信 在 Vue.js 中，父子组件间的通信是最常见的模式之...希望这些内容能够帮助读者更好地理解和掌握 Vue.js 的核心概念和技术细节。
vue基本语法
weixin_56263402的博客
06-19 440
VUE day01 异步函数和回调函数 何为异步函数：不会马上执行，需要特定的时机执行的函数，由于是异步的，不会阻塞主线程代码的执行 异步函数有哪些：ajax请求，定时器，延时器，文件读取 何为回调函数：把一个函数当作参数传递，将来特定的时机调用，这个函数就是回调函数，一般异步操作，都会用到回调函数 例如：setTimeout(()=>{ console.log(2)},1000)==>定时器里面的打印2不会立刻执行，会等1秒后打印2 回调函数的缺点：1.回调函数不会立刻被执行，阅读
vue2.x框架里面的事件总线eventBus的原理解析
峰会路转的博客
07-23 546
emit,$off事件了，从而就可以进行组件特别是兄弟组件之间的数据传递了！今天我们不讲怎么使用这个，主要记录下怎么实现这个总线的原理！态发生改变时，所有依赖于它的对象都将得到通知。发布—订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状。今天的总结就到此结束，有不足的地方可以提出大家互相学习~~~vuejs2.x里面的事件总线大家因该都会用了。上面还没有取消订阅的方法，我们再改进下。上面的方法不能传递参数，我们再改进下。然后我们就就可以获取到实例上的。来替代传统的发布—订阅模式。.
Vue-全局事件总线
最新发布
m0_64081601的博客
03-23 2838
在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。
什么是Vue中的事件总线机制（EventBus）
bug处理进行时
06-06 2722
Vue事件总线机制 - EventBus 事件总线产生的背景 在vue中最核心的部分就是组件，组件间的通信就是重中之重。通信分为父子组件通信、兄弟组件通信、不相干的组件通信等等多种方式。父级向子级通过props传递数据，子级通过 $emit 向父组件通知事件。但是当两个毫不相关的组件互相通信时应该通过什么来实现呢？ EventBus的简介 EventBus 又称时间总线 ，理解上来讲 EventBus 机制是通知的概念，EventBus作为所有组件共享的事件中心，既可以发送事件也可以接受事件，所有组件都可以
vue篇之事件总线（EventBus）
weixin_30466421的博客
07-12 179
vue篇之事件总线（EventBus） 转载于:https://juejin.im/post/5d28683ce51d455d6d5358b9
【Vue全局事件总线详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-05 1万+
全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。
【Vue项目】 bus事件总线
Allen_Sushi首页
11-17 1948
Vue2 bus事件总线的原理与使用
vue中央事件总线eventBus的简单理解和使用
wwf1225的博客
04-30 604
vue中央事件总线eventBus的简单理解和使用 公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。 用法如下： 第一步：项目中创建一个js文件（我通常给它取个名字为bus.js），引入vue，创建一个vue实例，导出这个实例，代码如下（一共就两行）： 1 import Vue f...
eventBus的原理
mz929的博客
07-16 613
Vue中的EventBus是一种事件总线，用于在组件之间进行通信。它的原理是通过创建一个全局的Vue实例作为中央事件总线，其他组件可以通过该实例来订阅和发布事件。这种机制可以实现不同组件之间的解耦，使得组件之间可以方便地进行通信和数据传递。但同时也需要注意避免滥用EventBus，因为过多的全局事件会导致代码维护和调试困难。2.在传递数据的组件中通过。3.在接收数据组件中通过。EventBus的使用。
Vue事件总线（EventBus）使用详细介绍
infotw的博客
07-16 4330
前言 vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。 Event...
Vue组件通信详解：从props到事件的传递
"Vue.js组件间通信解析，包括...以上就是Vue.js组件间通信的基本方法，理解并熟练运用这些技巧，能够帮助开发者构建更加灵活且易于维护的Vue应用程序。在实际开发中，应根据项目需求选择合适的方式进行组件间的通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值