vue2和vue3 ，bus（事件总线）用于非父子组件传值问题

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

#vue

本文介绍Vue CLI 2 和 Vue CLI 3 中如何使用事件总线进行组件间通信。在Vue CLI 2中，通常通过main.js中的$bus实现；而在Vue CLI 3中，则推荐使用mitt库来简化事件处理流程。

vue-cli2

1.main.js
在这里插入图片描述
2.发送
在这里插入图片描述

3.接收
在这里插入图片描述

vue-cli3

1…安装mitt
yarn add mitt
2.在入口文件main.js中引入在这里插入图片描述
3.事件发送在这里插入图片描述
4.事件接收在这里插入图片描述

打印this.$bus
vue-cli2
在这里插入图片描述
在这里插入图片描述

vue-cli3
在这里插入图片描述

【Vue3】中全局事件总线 $bus 的使用
Kyrie__Wu的博客
07-23 5549
【Vue 3】中全局事件总线 $bus 的使用
Vue2和Vue3组件间通信方式汇总（3）------$bus
qq_50276105的博客
12-23 1313
组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。
Vue2 全局事件总线：通俗易懂 + 简单案例
最新发布
dlmyrt的博客
09-24 395
全局事件总线就像一个 “全校通知群”—— 不管是一年级（子组件）、二年级（父组件）还是教务处（隔代组件），只要进了这个群，就能给群里任何人发消息（传数据），不用管彼此是什么关系。
Vue3中使用bus？
繁若华尘的博客
02-13 1426
方案适用场景优点缺点简单跨组件通信轻量、易用需手动管理监听层级明确的组件树无需全局依赖需手动实现事件逻辑Pinia/Vuex复杂状态管理可维护性高、工具链完善学习成本略高建议中小型项目简单通信 → 使用 mitt大型项目 → 优先 Pinia + 谨慎使用事件总线组件层级明确 → provide/inject + 自定义事件系统。
vue2和vue3的全局事件总线
Heartnottowake的博客
04-10 3215
vue2里面的全局事件总线 1，在main.js文件里面调用生命周期函数beforeCreate 在new.Vue实例中 .... beforeCreate(){ Vue.propotype.$name = this //这个name是可以随便更改的，可以使用你想用的名字 .... 2，在组件1中的methods创建一个函数调用，或者说在mounted里面直接调用，都可以 this.$name.$emit('a'，'我是要在组件2显示的值') 这里是使用你的全局事件总线 name 是使用 emit 触发
Vue 全局事件总线：Vue 2 vs Vue 3 实现
interest_ing_的博客
01-02 1040
在构建大型Vue应用时，跨组件通信是一个常见需求。Vue提供了多种通信方式，包括父子组件传参、兄弟组件通信、Vuex状态管理等。然而，对于简单的跨组件通信，全局事件总线（Event Bus）提供了一种轻量级的解决方案。本文将比较在Vue 2和Vue 3中实现全局事件总线的方法，并探讨各自的优缺点。
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
在Vue中，有多种方式实现组件之间的数据传递，主要包括父子组件间通信和非父子组件间通信。 **一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤...
Vue非父子组件之间传值
01-08
这里介绍的就是使用“Bus”（或称为事件总线、发布订阅模式或观察者模式）来解决这个问题。 首先，创建一个全局的事件总线，通常是在Vue实例的原型链上添加一个属性，这样所有组件都能访问到它。代码如下： ```...
Vue组件通信中非父子组件传值知识点总结
10-15
在Vue中，非父子组件的通信通常依赖于事件总线（Event Bus）或者Vuex状态管理库。这里我们将主要讲解事件总线的方法。 事件总线是一种自定义事件机制，它实际上是一个单独的Vue实例，用来作为组件间通信的桥梁。...
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
本文将详细介绍Vue 2.0中三种常用的组件间通信方式：父组件向子组件传值（props）、子组件向父组件传值（事件发射）、以及非父子组件之间的传值方法。 一、父传子（props） 在Vue中，子组件通过props接收来自父组件...
在Vue2和Vue3中事件总线的使用与区别
weixin_44582077的博客
07-27 1717
在Vue升级到3.0版本后，事件总线使用的方式有些许改变，Vue2可以直接使用new Vue()；在Vue3中，推荐使用mitt来帮助我们实现全局事件总线和局部事件总线。接下来让我们来对比2和3版本的使用和区别......
Vue中的$Bus使用
RopeHuo
02-19 2690
Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两个兄弟组建 C2.vue <template> <view> <h1>c2</h1> </view&gt...
Vue,vue-cli,父子组件间相互通信
大炮哥的博客
12-07 354
直接上代码！ 首先定义一个子组件： 可以看到，子组件非常简单，就只有一个方法"foo(p1,p2)" <template> <div class="app-container">I am child</div> </template> <script> export default { method: { foo(data, callback) { alert("传递数据给子组件：" + data); ca
vue2 全局事件总线（$bus）使用
glacierW的博客
12-29 1264
绑在bus上的都要主动销毁，因为App.vue销毁之后，bus还在，在上面注册的时间都还在占空间，所以需要进行销毁beforeDestroy和mounted同级。
【vue2】全局事件总线$bus
阿程的博客
02-01 1106
全局事件总线$bus
vue3 使用$bus事件总线
qq_41577134的博客
08-27 3226
1.安装mitt npm i mitt 2.在main.js注册 // ... import mitt from 'mitt' const $bus = {} const emitter = mitt() $bus.$on = emitter.on $bus.$emit = emitter.emit $bus.$off = emitter.off app.config.globalProperties.$bus = $bus app.mount('#app') 3.使用 3
vue2全局事件总线如何使用（$bus）
weixin_67002441的博客
06-05 1129
Vue.prototype.$bus = this //安装全局事件总线，bus就是当前应用的vm。1.接收数据:A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。2.提供数据: this.$bus.$emit('xxxx',数据)1.一种组件间通信的方式，适用于任意组件间通信。
vue3中路由跳转页面$bus多次触发调用问题
weixin_44166849的博客
12-04 734
vue3路由来回切换 路由跳转新页面在跳转回原来的页面 导致$bus.on回多次调用的问题
在Vue2中创建公共事件总线实现父子组件传值，bus.js放在哪里
04-26
<think>嗯，用户问的是在Vue2中创建公共事件总线bus.js的最佳实践，以及文件的放置位置，还有父子组件通信的最佳实践。首先，我需要回忆一下Vue2的事件总线相关知识。根据引用中的内容，事件总线是一个全局的Vue实例，用于组件间通信，特别是非父子组件的情况。用户提供的引用里提到，可以通过在main.js中定义Vue.prototype.$bus来创建全局事件总线，或者单独创建一个bus.js文件。 那问题来了，用户想知道bus.js应该放在哪个目录下。一般来说，Vue项目的结构通常有src目录，里面包含components、utils、plugins等文件夹。根据引用5中的例子，他们提到在utils文件夹下创建eventBus.js，然后通过import引入。所以可能最佳实践是将bus.js放在src/utils或src/plugins这样的目录里，这样方便管理和维护。 接下来是父子组件通信的最佳实践。引用3详细说明了使用props和$emit的方式，父组件通过props传递数据给子组件，子组件通过$emit触发事件来向父组件通信。这种方式是Vue官方推荐的，适用于直接的父子关系。而事件总线更适合跨层级或兄弟组件之间的通信，比如引用2和引用4提到的例子，使用$bus来避免多级传递的繁琐。 用户可能还关心如何正确使用事件总线，比如避免$emit先于$on执行的问题，如引用4中提到的使用setTimeout或者确保$on在created生命周期钩子中注册。此外，还需要注意在组件销毁时移除事件监听，防止内存泄漏。比如在beforeDestroy钩子中使用$off来取消事件监听。 另外，用户提到最佳实践，可能需要对比事件总线和Vuex的适用场景。引用4指出，如果场景不复杂，使用Vuex可能过于繁琐，这时事件总线更合适。但如果是大型项目，状态管理复杂，Vuex可能更适合。 总结一下，回答需要包括以下几点： 1. bus.js的创建方式，放在utils或plugins目录。 2. 父子组件通信使用props和$emit。 3. 事件总线的正确使用，包括注册、触发、移除监听。 4. 注意事项，如异步处理、内存泄漏、适用场景。 5. 对比事件总线和Vuex，给出最佳实践建议。 需要确保回答结构清晰，步骤明确，同时结合引用中的示例代码，提供具体的实现方法。可能还需要提到在Vue3中事件总线的替代方案，比如使用mitt库，但用户问的是Vue2，所以这一点可以作为补充说明。</think>### Vue2 公共事件总线 bus.js 最佳实践及组件通信方案 #### 一、事件总线的创建与文件位置 1. **文件创建方式** ```javascript // src/utils/bus.js import Vue from &#39;vue&#39; export const bus = new Vue() ``` **推荐目录结构**： - 通用工具类文件建议放在 `src/utils` 目录 - 全局插件性质的文件可放在 `src/plugins` 目录 - 小型项目也可直接声明在 `main.js` 中： ```javascript // main.js Vue.prototype.$bus = new Vue() ``` 2. **组件中调用方式**： ```javascript import { bus } from &#39;@/utils/bus&#39; // 或直接通过 this.$bus 访问（需全局注册） ``` #### 二、父子组件通信最佳实践 1. **直接父子关系**： - 优先使用 `props/$emit` 机制（符合单向数据流原则） ```vue <!-- 父组件 --> <Child :data="list" @update="handleUpdate"/> <!-- 子组件 --> <script> this.$emit(&#39;update&#39;, newData) </script> ``` 2. **跨层级通信**： - 使用事件总线（需注意生命周期管理） ```javascript // 发送方 bus.$emit(&#39;global-event&#39;, payload) // 接收方 mounted() { bus.$on(&#39;global-event&#39;, this.handleEvent) }, beforeDestroy() { bus.$off(&#39;global-event&#39;, this.handleEvent) } ``` #### 三、关键注意事项（引用实践） 1. **时序问题解决方案**（引用[4]）： ```javascript setTimeout(() => { this.$bus.$emit(&#39;event&#39;, data) }, 0) ``` 或确保接收方在 `created` 生命周期注册监听 2. **内存泄漏预防**： ```javascript // 组件销毁时移除监听（引用[4]） beforeDestroy() { this.$bus.$off(&#39;event&#39;) } ``` 3. **数据监听策略**（引用[4]）： ```javascript watch: { receivedData: { handler(val) { // 处理数据变化 }, deep: true } } ``` #### 四、架构建议对比 | 方案 | 适用场景 | 优点 | 缺点 | |---------------|------------------------------|-----------------------|----------------------| | Props/$emit | 直接父子组件 | 官方推荐，类型检查 | 多级传递繁琐 | | Event Bus | 跨层级/非父子组件 | 灵活轻量 | 需手动管理事件 | | Vuex | 大型应用/复杂状态管理 | 集中式状态管理 | 学习成本较高 | #### 五、进阶优化方案 1. **TypeScript 支持**： ```typescript // bus.ts import Vue from &#39;vue&#39; interface EventBus { $on: (event: string, callback: Function) => void $off: (event: string, callback?: Function) => void $emit: (event: string, ...args: any[]) => void } export const bus: EventBus = new Vue() ``` 2. **Vue3 兼容方案**： ```javascript // 使用 mitt 库替代 import mitt from &#39;mitt&#39; export const bus = mitt() ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值