$bus 事件总线-------处理非父子间的通信

最新推荐文章于 2024-05-23 16:46:28 发布
原创 最新推荐文章于 2024-05-23 16:46:28 发布 · 175 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了如何使用Vue的事件总线（$bus）实现非父子组件之间的通信。在`GoodListItem.vue`中，通过`this.$bus.$emit('事件名称', 参数)`触发事件。而在`Home.vue`中，利用`mounted`生命周期钩子，通过`this.$bus.$on('事件名称', 回调函数(参数))`监听并响应该事件，实现了组件间的通信。这种方式为Vue应用提供了一种灵活的跨级组件交互解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • bus ->总线
  • Vue.prototype.$bus = new Vue() main.js 设置
  • this.$bus.$emit(‘事件名称’, 参数)
  • this.$bus.$on(‘事件名称’, 回调函数(参数))
  • 如何将GoodsListItem.vue中的事件传入到Home.vue中？非父子间的通信在这里插入图片描述
  • 使用事件总线
    在这里插入图片描述
  • 在GoodListItem.vue methods中发射事件
    • this.$bus.$emit(‘事件名称’, 参数)
  • 在Home.vue ，mounted 周期函数中监听该事件
    • this.$bus.$on(‘事件名称’, 回调函数(参数))
Vue事件总线：this.$bus.$emit与this.$bus.$on
skysys的研究小屋
01-15 1万+
1.创建Vue实例 //main.js Vue.prototype.$bus = new Vue(); 2.发射事件 //GoodsList this.$bus.$emit("aaa") 3.监听事件 //home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) 4.示例：监听图片加载 //GoodsListItem.vue <template> <img :src="showImag
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间
最新发布
07-27 771
在Vue中，$bus通常是一个事件总线（Event Bus），用于在组件之间进行通信，尤其是在没有直接父子关系的组件之间。虽然Vue推荐使用provide和inject或者Vuex进行组件通信，但在某些简单场景下，使用事件总线也是一种可行的解决方案。
java中的EventBus事件总线技术
letter song的博客
05-23 2735
EventBus既是事件的接收站（收集发布的事件），也是转发器（将事件传递给订阅者），实质上起到了事件总线的作用。事件总线扮演着中介的角色，负责在事件发生时，根据事件类型将事件分发给所有对此事件感兴趣的（即已经注册的）订阅者。采用发布订阅的模式（有时描述为注册监听的模式），通过 【注册器】将【订阅者】注册到【总线】中，维护【事件】和【订阅者】的订阅关系；再通过【事件发送器】发布具体【事件载体】，第一步使用【事件分发器】调用【订阅者】来执行具体的订阅者消费逻辑。
组件之间通过bus中央事件总线进行通信
YY的博客
11-24 450
组件之间通过bus中央事件总线进行通信
Vue事件总线（EventBus）使用指南：详细解析与实战应用
热门推荐
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-31 2万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信
qq_14993591的博客
11-09 5886
全局事件总线原理分析 前提：x是个组件，不属于任何一个组件 要求：A组件想要收到别的组件给的信息 在A组件里给x绑定个自定义事件demo,对应的回调函数就留在A中 D组件想给A传点数据，就可以这样做： 在D组件里，写点代码触发x身上的demo事件，并且传点数据过去（666）， x身上的demo事件被触发了，demo事件的回调函数就得执行，而这个回调函数在A组件里面，那之前D组件传的数据666，就在A组件里面 要求：B组件想收到点别的组件传的数据， 在B组件里写点代码，给x组件绑定个事件test,回调函
vue3事件总线vue-happy-bus: 自动清理监听事件
**在 vue 中，我们可以使用 event bus 来实现跨组件间通信**: 这解释了事件总线在Vue中的作用，它是一种在不同组件间传递信息的方式，可以用于父子组件通信，也可以用于非直接关联的组件之间的通信。 **但一个弊端...
vue-cli 使用vue-bus来全局控制的实例讲解
10-18
`vue-bus`是一种轻量级的事件总线，用于在Vue组件之间传递数据，尤其适用于非父子或非兄弟组件之间的通信。相比于Vuex，它的使用更为简单，但可能需要谨慎处理事件监听的生命周期。 首先，你需要通过`npm`安装`vue-...
在vue-cli中组件通信的方法
08-28
非父子组件间的通信通常使用 Vue 实例的全局事件总线（Event Bus）或者 Vuex 状态管理器。这里以 Event Bus 为例： 1. 创建一个全局的 Vue 实例作为事件总线： ```javascript // event-bus.js import Vue from 'vue...
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
12-01
在实际应用中，当两个组件没有父子关系时，直接使用props传递数据并不适用，这时就需要借助其他方式，如事件总线（Event Bus）。 首先，我们在`src/assets`目录下创建一个名为`EventHandler.js`的文件，这是我们的...
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我手写过一个组件，再此很感谢他的指导。目前简单的组件已经有了自己的逻辑思维，正在从低级码农向中级码农蜕变。废话不多说。上图看看组件情况。 新增按钮组件： 操作按钮组合组件： 此时有个需求就是，无论是哪个按钮，如果改变了列表中的数据，列表需要实时更新数据。 此时就需要用到组件间的事件触发。 父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
Vue中的发射事件:this.$bus.$emit与监听事件:this.$bus.$on
Yujis的博客
03-15 5583
创建一个vue实例,且在main.js文件里全局引用 import Vue from 'vue' const bus = new Vue() export default bus 2.main.js import bus from '@/utiles/bus.js' 3.发射事件 setTimeout(() => { //row 代表要传递的参数数据 this.$bus.$emit("yulan", row); }, 100); 4.监听事件 m.
组件之间使用this.$bus.$emit()，this.$bus.$on()， this.$bus.$off(event)
Cool_so_cool的博客
04-28 6235
一个页面中引入了两个兄弟组件,a和b,通过bus来传递值和事件通信, 首先:a中有个input,输入一个词,onblur事件来发送请求,服务端返回一组数据,通过bus.$emit(“sendData”, arr)传递给b组件。 在实际工作中可以这么使用，从大佬文章里面复制出来记录保存一下，很清晰。 原创文章https://blog.csdn.net/bus_lupe/article/details/85341889 this.$bus是全局变量 a、b是两个父组件，c是子组件。 c页面触发事件： thi.
this.$emit和bus.$emit的区别
t1621353644的博客
02-20 1095
允许在不同组件之间进行全局事件通信。根据具体的情况和需求选择适当的方式来触发和监听事件。是Vue组件内部使用的机制，而事件总线（
vue中$bus.$emit、$on的用法
活宝小娜的博客
07-13 2144
vue中$bus.$emit、$on的用法。
vue中$bus的用法及$emit、$on、$off的使用
ldcaws的专栏
12-06 1万+
vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。 如两个组件之间传递数据： 子组件1 子组件2 1、$emit2、$on注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。3、实例事件 实例事件就是在构造器外部调用构造器内部的数据。4、实例 在Student组件中提供数据给另一个School组件 在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑
Vue项目组件间通信总结
Allurewuhui的博客
01-30 392
一；通过给组件绑定自定义事件实现 子向父传递参数 1.首先在父组件当中 给子组件绑定自定义事件 2.在子组件中，通过 this.$emit ( '自定义事件名' ， 要传递的数据) 进行子组件中数据的传递 3.在父组件中的methods中书写自定义事件函数，函数中的形参用来接收子组件传递过来的数据，在函数体中进行数据的处理 // 这是父组件中的子组件标签 <SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/&
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2709
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值