vue eventbus使用

最新推荐文章于 2025-05-26 08:00:00 发布
最新推荐文章于 2025-05-26 08:00:00 发布
阅读量579 收藏 1
点赞数
博客介绍了Vue的EventBus，可在main.js中使用。在A组件触发事件发射数据，B组件接收A组件的数据，实现组件间的数据传递。

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

vue的eventBus

首先在main.js中

Vue.prototype.$eventBus = new Vue()

A组件中通过触发事件或者其他什么，然后发射数据

this.$eventBus.$emit('key','data-1232131232132131232');

 

B组件中接收A组件的数据

this.$eventBus.$on('key',function(params){ console.log(params); // data-1232131232132131232 });
Fisher_yu01
关注
使用 vue 事件总线（EventBus）
qq_34261347的博客
09-17 423
EventBus的简介 EventBus又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。 如何使用EventBus 初始化 首先创建事件总线并将其导出，方便其他模块使用或者监听它，有两种方式来处理 第一种，创建一个event_bus.js文件 //
Vue实战指南：Vue中EventBus的使用方法
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-17 3573
在构建复杂前端应用时，组件间的通信是必不可少的一环。Vue.js 提供了多种方式来实现这一目标，包括父子组件间的props传递、自定义事件、Vuex等。然而，在某些场景下，如果多个无直接父子关系的组件需要进行通信，则可以采用全局事件总线（Global EventBus）的方式。本文将详细介绍如何在Vue项目中实现并利用EventBus来促进组件间通信，帮助你更高效地组织和管理应用逻辑。
Vue事件总线（EventBus）使用指南：详细解析与实战应用
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-31 2万+
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。EventBus 又称为事件总线。
Vue2 封装全局事件总线（Event Bus） 实现跨组件通信 - 附完整示例
最新发布
m0_48968874的博客
05-26 820
Vue2 封装全局事件总线（Event Bus） 实现跨组件通信 - 附完整示例
什么是Redux？它的核心概念有哪些？
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-24 771
引言Redux 核心概念Store（仓库）State（状态）Action（动作）Reducer（规约器）安装与初始化示例代码示例一：定义 Action示例二：编写 Reducer示例三：合并 Reducers示例四：连接 Store 和组件功能使用思路1. 状态管理2. 异步操作3. 模块化和可测试性实际工作中的使用技巧结语return {return {Redux 为复杂的前端应用提供了一套强大而灵活的状态管理方案。
eventBus在vue中的使用
热门推荐
Annie的博客
07-01 2万+
在全局定义，全项目通讯
vue里面使用EventBus（事件总线）
qq_44552416的博客
09-25 1898
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担方便易用：只需要引入mitt并配置即可使用支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue应用场景：组件通信。
详解vue 组件之间使用eventbus传值
01-21
对于前端的我们而言，并非是只有写界面才是最大的问题，很多的情况下，我们需要关注的是数据，比如js页面的数据传递等等，学习vue我们也是需要知道怎么去使用数据 当然，使用存储也是可以得，但是并非一定要缓存，...
Vue EventBus自定义组件事件传递
12-09
组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。 而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为...
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 1862
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
vue 使用 eventBus
A secret makes a woman woman.
07-18 496
文件 vue-bus.js const install = function (Vue) { const Bus = new Vue({ methods: { emit (event, ...args) { this.$emit(event, ...args); }, ...
VueEventBus:Vue的EventBus实现
05-10
Vue EventBus实现 替代Vuex实现组件数据、事件交互
Vue中 EventBus 的使用
lannieZ的博客
06-15 1677
vue子组件之间的传值
vue--------eventBus使用
bidepanm的博客
07-10 335
实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。 main.js: import globalBus from '@/components/globalBus/index.js'; // 全局的eventBus Vue.prototype.globalBus = globalBus; 新建globalBus/index.js: /** * @namespace global * 全局事件命名规则必须是 global+moduleName +
Vue中 EventBus 的使用，如何实现Vue中的EventBus
程邓楠的博客
02-20 1万+
vue 中兄弟组件或者多级组件之间的通讯，是比较麻烦的，这个时候呢，我们就可以使用 EventBus来实现我们想要的业务，但是面试的时候又经常会被问到，或者让写出 EventBus，所以就来探索一下 一、Vue中如何使用 EventBus？ 1. 初始化时全局定义 import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eve...
vue eventBus 使用
小耳朵晨晨
03-10 855
主页是helloWorld: a.vue 和b.vue是两个兄弟模块 实现功能 两个兄弟模块都能使用helloWord的num 。 新建一个event-bus.js import Vue from 'vue' export const EventBus = new Vue() 在main.js中创建实例 （添加一句） Vue.prototype.$EventBus = new Vue(); helloWorld页面 <template> <div class="h
vue项目中event bus的简单使用
优快云_1999的博客
07-30 405
之前做的一个vue后台管理系统中，需要实现这样一个功能：从列表页点击新建或编辑进入新建、编辑页面，新建、编辑完成后需要关闭当前的新建和编辑tab，而tab的关闭则是由项目中的tag组件控制的， 新建和编辑组件与tag组件并无父子关系，因此无法用父子组件传递数据，所以想到了用event bus来实现。 记录步骤如下： 1，需要先新建一个bus.js文件 2，在接收组件和传递组件...
vue组件通信必知必会——事件总线Event Bus
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-15 7204
主要介绍了vue项目中，如何使用EventBus（事件总线）实现跨组件通信，并了解vue2和vue3中不同组件之间，生命周期构子函数执行的顺序。
vue 的事件总线：EventBus的用法
qq_37018847的博客
03-29 1069
vue 的事件总线：EventBus的用法父子组件通讯原则EventBus的简介如何使用EventBus初始化发送事件移除事件监听者全局EventBus创建全局EventBus总结 现在很多JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样很好，但组件之间的数据通讯是一个问题。在Vue中同...
vue eventBus 的使用
07-22
在 Vue 中，你可以使用事件总线（Event Bus）来实现组件之间的通信。事件总线是一个空的 Vue 实例，可以用于触发和监听自定义事件。 首先，在你的项目中创建一个新的 Vue 实例作为事件总线： ```javascript // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值