Vue全局事件总线传值总结

最新推荐文章于 2025-05-08 15:47:30 发布

著名CV工程师

最新推荐文章于 2025-05-08 15:47:30 发布

阅读量2.2k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/cxygzy/article/details/121181828

本文介绍了如何在Vue应用中使用事件总线进行组件间的通信，包括如何挂载事件总线到Vue实例原型，以及如何在组件中传递和接收参数，从而实现不同组件之间的数据交互。

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

1、在使用事前需要将事件总线在挂载到Vue实例的原型上，组件就可以通过方法访问原型对象

2、传递参数

3、接受参数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

著名CV工程师

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue 事件总线（总线传值），eventBus的使用

PrimaryColor

08-24

1106

介绍： vue组件通信有很多，比如父子组件，兄弟组件通信，还有vuex。如果两个组件之间不存在父子，也不存在兄弟关系的时候，那要是想在一个组件里面点击了一个按钮，并触发另一个组件刷新数据的时候该怎么办？首先可以想到的是使用vuex，点击按钮的时候修改vuex里面的值，然后在另一个组件里面监听这个值，当发生变化的时候并刷新数据。逻辑上是可以的，不过就是太麻烦了，今天给大家推荐一个新的组件传值方式，总线传值eventBus。一、首先在main.js里面初始化一个事件总线实例。其实就是重新构造一

vue全局事件总线

qq_45848432的博客

11-16

701

vue组件间传值有很多种方法，这里我们来讲讲如何利用全局事件总线来进行组件间传值。先讲讲我们需要实现的一个案例，我们需要在兄弟组件中传值，将Student.vue中的学生信息传递给School.vue中进行使用，下面我们进行详细的操作。一、注册全局事件总线 在一个创建好的vue2项目中注册全局事件总线(即在Vue的原型对象上添加一个对象$bus)，用于存放数据。我们都知道最大的组件是通过new Vue创建的实例对象，那么该组件能够通过隐式原型链访问到$bus。子组件是VueComponent的实例对象

参与评论您还未登录，请先登录后发表或查看评论

vue事件总线传值

QZ9420的博客

11-08

584

Vue事件总线（EventBus）使用指南：详细解析与实战应用父子组件传值

最新发布

Java&Develop的博客

05-08

1314

Vue事件总线（EventBus）使用指南：详细解析与实战应用父子组件传值

vue组件传值之事件总线

wsdnnnnnnnnn的博客

02-08

808

组件传值之事件总线（两种方法实现使用事件总线传值）除了上面这种初始时候在main.js之中直接将eventBus挂载到vue实例上面的方法，我们还可以是使用封装js文件的方法实现事件总线传值，

Vue事件总线、组件之间的传值

往事随风的博客

09-17

2764

父组件向子组件传值（1）第一个就是要明白怎么在父页面中向子组件中传值？你可以给子组件传入一个静态的值：但我们一般都是需要传动态的值，所以需要v-bind绑定：当然，你传的值可以是数字、对象、数组等等，参见vue官网（2）第二个就是要知道如何在子组件中接受父页面传过来的值，有几点需要了解：组件实例的作用域是孤立的; 子组件要显式的用props选项声明它预期的数据，如： // 某个子...

vue通过事件总线bus传值

ko8be24的博客

10-25

1399

1.建⽴⼀个公共的js⽂件，专⻔⽤来传递消息。bus.js import Vue from 'vue' export default new Vue 2.在需要传递的两个组件中都引入bus.js import bus from '../util/bus.js' 3.定义一个方法传递msg <button @click="go">传递消息</b...

组件间通信（全局事件总线）vue3 --第五节

weixin_51034048的博客

11-12

543

vue3用插件实现事件总线，

Web前端 ---- 【Vue3】vue3中的组件传值（props、自定义事件、全局事件总线）

weixin_68854196的博客

01-13

1569

本文介绍了在vue3中的props、自定义事件、全局事件总线的使用

组件间通信（全局事件总线）vue2---第四节

weixin_51034048的博客

11-12

476

事件总线。

Vue 中央事件总线的坑

grootbaby

09-04

1858

两个问题：问题1：为什么第一次触发的时候页面B中的on事件没有被触发问题2：为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。问题一第一次触发的时候页面B中的on事件没有被触发产生原因当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事......

Vue组件传值之bus总线

01-08

引言在vue中组件传值有多种方式，我们最常用的是props，当然还有vuex，但是对于简单的场景，vuex显得过于复杂了，今天我们介绍另一种组件传值的方式——Bus总线正文使用一个空的Vue实例作为中央事件总线。实际应用中，将bus(空Vue)定义成单独的文件Bus.js import Vue from 'vue' const Bus = new Vue() export default Bus 方法一：在组件一中引入 import Bus from './Bus' export default { data() { return { ......

vue事件总线EventBus(兄弟组件之间的传值)

qq_53061847的博客

09-13

2381

EventBus又称为事件总线，相当于一个全局的仓库，任何组件都可以在这个仓库里面获取事件。

vue事件总线兄弟组件父子子父组件祖孙组件传值(简单易懂)

词不达意难知的博客

08-08

473

vue事件总线兄弟组件、父子子父组件、祖孙组件传值(简单易懂)

vue2中使用事件总线（EventBus）传值

qq_43575827的博客

07-20

816

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

vue全局总线传参

m0_53865445的博客

01-04

345

vue全局总线传参

在 Vue.js 中使用事件总线在组件之间传递数据

油墨香^-^的博客

08-03

203

这是对 Vue.js 中事件总线的介绍。事件总线充当组件之间易于实现的独立通信，无需通过中央组件或父组件。虽然事件总线最初似乎是组件间通信的便捷方法，但建议探索替代选项，例如provide/inject或全局状态管理。这些替代方案为促进组件之间的通信提供了更强大且可维护的解决方案。

Vue 事件总线兄弟组件之间传值

weixin_43835059的博客

02-12

800

Vue事件总线 evenbus 兄弟组件之间传值 vue传值方式主要有四种 1.路由带参数传值 2.父子组件之间传值，父传子用props，子传父用emit 3.如果是大项目可以使用vuex传值，小项目少页面可以使用evenbus之间进行传值事件总线之间传值可以分为两种，一种全局事件传值，一种单独设一个js文件进行引用传值第一种：全局使用，在main.js中用vue的原型对象上添加一个bus...

Vue全局事件总线（兄弟组件之间传值）

m0_50832030的博客

03-15

1694

1、安装全局时间总线。在man.js中给这个Vue实例添加一个beforeCreate钩子。在Vue原型对象中添加一个$bus赋值为当前应用的vm(Vue实例) 2、使用事件总线。一、提供数据的组件：使用$bus的$emit Api去传值给A组件二、接收数据组件比如：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件的自身，可以在mounted钩子中接受数据 3、最好在接收数据的组件中的beforeDestroy钩子中，用$bus的$off Api去解绑当前

vue3事件总线bus传值

09-06

在Vue 3中，官方取消了全局事件总线的使用，这给组件之间传值带来了一些麻烦。为了解决这个问题，我们可以使用一个插件叫做mitt。首先，你需要安装并使用mitt插件。然后，在接收传值的组件中，你需要引入bus并监听事件，使用bus.on('事件名'，(值)=>{ console.log(值) })来接收传递的值。另外，如果你需要在某个div的点击事件中将值传递给其他组件，你可以使用bus.emit('事件名',值)来实现。123 #### 引用[.reference_title] - *1* [Vue3中的全局事件总线(兄弟间传值)](https://blog.csdn.net/Yan9_9/article/details/128832532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3中常用的三种组件传值方式](https://blog.csdn.net/weixin_44001222/article/details/128414607)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]