Vue中事件总线的使用方法

最新推荐文章于 2025-05-08 15:47:30 发布
最新推荐文章于 2025-05-08 15:47:30 发布
阅读量209 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/api_git355/article/details/132861026
版权
本文详细介绍了Vue事件总线的使用方法，包括如何创建事件总线实例、发布事件和订阅事件，以此实现组件间的通信和数据传递，促进组件解耦。

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

Vue中事件总线的使用方法

事件总线（EventBus）是Vue.js中一种常用的通信机制，用于在组件之间传递数据和触发事件。它允许一个组件发布事件，其他组件可以订阅并响应这些事件。在本文中，我们将详细介绍Vue中事件总线的基本用法，并提供相应的源代码示例。

首先，我们需要在Vue应用中创建一个事件总线。可以通过Vue实例来实现这一点。在主入口文件（通常是main.js）中，我们可以创建一个Vue实例并将其作为事件总线。以下是创建事件总线的代码：

// main.js

import Vue from 'vue'

Vue.prototype.$bus = new
了解本专栏 订阅专栏 解锁全文
前端Vue.js的事件总线使用方法
小白菜的博客
04-26 788
在Vue.js开发中，组件化是其核心特性之一。随着项目规模的增大，组件之间的通信变得尤为重要。事件总线作为一种轻量级的组件通信解决方案，能够有效地解决非父子组件之间的消息传递问题。本文的目的就是详细介绍Vue.js事件总线的使用方法，涵盖从基本概念到实际应用的各个方面，帮助开发者更好地利用事件总线进行组件通信。本文将按照以下结构进行组织：首先介绍事件总线的核心概念与联系，包括其原理和架构；接着讲解核心算法原理和具体操作步骤，通过Python源代码进行详细阐述；然后给出数学模型和公式，并结合具体例子进行说明。
Vue——全局事件总线
求职大学生
06-01 297
它实际上使用了 Vue 的实例作为中央事件系统：任何组件都可以访问这个中央事件系统，以便在其他组件触发或响应某些事件。：事件总线可以视为一个全局的事件监听器：一个组件可以通过它来广播(emit)事件，其他组件则可以通过它来监听(on)这些事件。：在主要的 Vue 实例（通常在 main.js 或者 index.js 文件中）创建一个新的 Vue 实例来作为事件总线。：事件总线是一种非常灵活的通信方式，可以帮助你解决许多复杂的组件间通信问题。来发送事件，这个事件可以是任何你定义的事件。
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 1840
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
vue事件总线的使用
weixin_57446003的博客
04-26 315
Vue事件总线（EventBus）使用指南：详细解析与实战应用 父子组件传值
最新发布
Java&Develop的博客
05-08 1117
Vue事件总线（EventBus）使用指南：详细解析与实战应用 父子组件传值
Vue中事件总线的使用
weixin_45805570的博客
04-12 687
事件总线的概念 EventBus事件总线，通过事件总线，我们可以在任意两个组件之间传递数据。 使用事件总线的原因 对于父子组件，我们可以使用props从父向子传递数据，也可以使用**this.$emit(“方法名”,参数)**从子向父传递数据，这确实是非常方便好用了。但如果是非父子组件，我们就无法通过这种方式来传递数据了，事件总线就是用来处理这种情况的，实质上EventBus是一个不具备 DOM 的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。 事件总线的使用 1.首先我们要定义事件总线 //ma
Vue 自定义事件实现子组件给父组件传递数据
m0_50163856的博客
02-11 507
定义自定义事件 <template> <div id="app"> <!-- *自定义事件定义方式一 func是自定义事件名， getData为事件的回调 --> <PropsDemo @func="getData"></PropsDemo> <!-- *自定义事件定义方式二 --&g
Vue 事件总线的使用
Q1368089323的博客
05-15 1179
Vue 事件总线的使用一、Vue2.0 版本二、Vue3.0版本三、事件总线的使用四、总结 前言 在vue中使用事件总线可以省去很多组件间通信的麻烦，例如可能会出现的子传父，父再传子的多个传递过程。事件总线使用emit进行广播，然后某个组件进行监听，就达到通信的目的了 一、Vue2.0 版本 //main.js中 const app = createApp({})//正常的创建Vue实例 app.config.grobalProperties.$bus = createApp({})//创建事件总线
介绍常用的vue2事件总线使用
04-23
介绍常用的vue2事件总线使用
vue事件总线（eventBus）的使用
weixin_43930421的博客
06-01 521
钉钉
vue事件总线怎么使用（子组件与子组件之间的通信）
zhuxichong123的博客
04-25 390
总结：Vue事件总线可以用于父子组件之间、兄弟组件之间、跨级组件之间等场景的通信。但由于它是全局对象，所以在复杂的应用中可能会导致事件冲突或难以追踪问题。因此，在使用事件总线时，建议仅在必要情况下使用，并且注意事件命名和解绑。Vue事件总线是一种通信机制，它允许在Vue组件之间进行事件传递和处理。1.在main.js注册。
Vue事件总线（EventBus）使用介绍
曹定栓的博客
09-18 973
`EventBus` 又称为`事件总线`。在Vue中可以使用 `EventBus` 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所有组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
vue之事件总线
Jack, what else can you do besides holding your little darling?
10-25 428
1.事件总线介绍 在vue中跨越层级的两个组件进行通信，若使用props传值和$emit触发的方式会十分繁琐，而事件总线的通信方式更适合跨越层级的组件通信。 2.事件总线原理 事件总线可以用一个对象来表示每一个事件 都有一个数组来记录这个事件的监听者 { "event1": [hander1, hander2], "event2": [hander1, hander2, hander3], } 1，若给某个事件添加监听者，就把处理函数添加到这个事件对应的数组中去 2，若给某个事
Vue中 事件总线（eventBus）详解及使用
热门推荐
明天也要努力的博客
03-06 1万+
传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门：Vue状态管理器（vuex）详解及应用场景 传送门：Vue中 $ attrs、$ listeners 详解及使用 1. 简介 Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？ 如果应用程序不需要类似 Vuex 这样的库来处理组件之
vue里面使用EventBus（事件总线）
qq_44552416的博客
09-25 1844
轻量级: Mitt只有200字节大小，不会增加你的应用程序的负担方便易用：只需要引入mitt并配置即可使用支持任何Javascript环境：Mitt支持在任何Javascript环境下使用，不仅限于Vue应用场景：组件通信。
Vue事件总线（EventBus）使用
m0_52182385的博客
02-14 321
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，如果应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即EventBus来通信。
Vue事件总线（EventBus）的使用
小太阳的博客
05-11 821
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。 但是两个页面没有任何引入与被引入关系，该怎么通信呢？ 如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的 事件总线 ，即 EventBus来通信。 EventBus的使用 1.初始化（有两种方式），首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。 （1）新创建一个 .j
Vue中全局事件总线使用
weixin_42202992的博客
02-28 205
Vue中全局事件总线的使用
vue3中如何使用全局事件总线
10-17
在Vue 3中，全局事件总线通常用于应用程序中各组件之间的通信，尤其是在单文件组件(SFC)之间需要跨模块传递数据和触发操作的时候。Vue.js本身并没有内置的全局事件总线，但是你可以通过以下步骤创建一个： 1. 定义一个独立的模块或文件来作为事件中心，比如`store.js`： ```javascript // store.js import { createApp } from 'vue'; export const eventBus = new Vue(); export function emit(event, data) { eventBus.$emit(event, data); } export function on(event, callback) { eventBus.$on(event, callback); } ``` 2. 在`main.js`或其他启动文件中初始化这个全局事件总线，并暴露出去供其他组件引用： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import store from './store/store.js'; const app = createApp(App); app.use(store); app.mount('#app'); ``` 现在，你可以像这样在任何组件中使用事件总线： ```javascript // 组件A import { on, emit } from '@/store/store.js'; export default { methods: { sendData() { emit('eventName', { keyData: 'some value' }); }, handleEvent(data) { // 处理接收到的数据 console.log(data); } }, mounted() { on('eventName', this.handleEvent); }, beforeDestroy() { off('eventName', this.handleEvent); // 可选，移除监听 } }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值