Vue全局事件总线传值总结

最新推荐文章于 2025-09-08 10:39:52 发布

原创最新推荐文章于 2025-09-08 10:39:52 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

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

2、传递参数

3、接受参数

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

著名CV工程师

关注关注

3
点赞
踩
4

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

weixin_43835059的博客

02-12

824

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

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

Java&Develop的博客

05-08

1546

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

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

vue3如何配置全局事件

最新发布

leijmdas的专栏

09-08

362

（window / document 的 resize、keydown、wheel …（200 byte）、tiny-emitter 或自写 Reactive 方案。下面把两种场景的配置方式、最佳实践和易踩的坑一次讲清，拿来即用。二、原生 DOM 全局事件（window / document）全局 DOM 事件尽量集中到入口或专用插件，避免各组件各自为政。一、组件级“全局事件”——事件总线（Event Bus）如果想“只监听一次，整个应用有效”，可以在。（自定义事件，与 DOM 无关）

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事件总线传值

QZ9420的博客

11-08

598

vue组件传值之事件总线

wsdnnnnnnnnn的博客

02-08

856

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

vue全局事件总线

qq_45848432的博客

11-16

723

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

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

weixin_51034048的博客

11-12

570

vue3用插件实现事件总线，

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

weixin_51034048的博客

11-12

500

事件总线。

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

weixin_68854196的博客

01-13

1629

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

Vue 中央事件总线的坑

grootbaby

09-04

1910

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

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

往事随风的博客

09-17

2790

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

vue通过事件总线bus传值

ko8be24的博客

10-25

1414

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...

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

PrimaryColor

08-24

1128

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

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

qq_53061847的博客

09-13

2432

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

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

词不达意难知的博客

08-08

491

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

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

qq_43575827的博客

07-20

851

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

vue全局总线传参

m0_53865445的博客

01-04

370

vue全局总线传参

iOS 26 适配指南

油墨香^-^的博客

08-03

242

iOS26适配指南摘要：iOS26带来了LiquidGlass设计语言、UIKit支持@Observable模型、AppleIntelligence集成等新特性。适配要点包括：1）使用宏和@available进行版本判断；2）处理视觉变化（如禁用导航栏共享背景）；3）利用新开发范式（@Observable数据驱动）；4）确保使用UIScene生命周期。适配流程建议先修复崩溃问题，再逐步适配新特性，最后进行全面测试。兼容性方面需注意iOS26仅支持iPhone11及以上机型，测试时建议添加UIDesignRe

vue3事件总线bus传值

09-06

在Vue 3中，官方取消了全局事件总线的使用，这给组件之间传值带来了一些麻烦。为了解决这个问题，我们可以使用一个插件叫做mitt。首先，你需要安装并使用mitt插件。然后，在接收传值的组件中，你需要引入bus并监听...