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 的使用
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
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 触发
Vue2 全局事件总线：通俗易懂 + 简单案例
最新发布
dlmyrt的博客
09-24 395
全局事件总线就像一个 “全校通知群”—— 不管是一年级（子组件）、二年级（父组件）还是教务处（隔代组件），只要进了这个群，就能给群里任何人发消息（传数据），不用管彼此是什么关系。
Vue 全局事件总线：Vue 2 vs Vue 3 实现
interest_ing_的博客
01-02 1040
在构建大型Vue应用时，跨组件通信是一个常见需求。Vue提供了多种通信方式，包括父子组件传参、兄弟组件通信、Vuex状态管理等。然而，对于简单的跨组件通信，全局事件总线（Event Bus）提供了一种轻量级的解决方案。本文将比较在Vue 2和Vue 3中实现全局事件总线的方法，并探讨各自的优缺点。
在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.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接收来自父组件...
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事件,统一移除事件
fxshy的博客
06-28 713
Vue2中管理$bus事件,统一移除事件
vue2事件总线
zhanghaoplc的博客
12-17 474
发射事件 子组件 this.$bus.emit('aaa') 监听事件 父组件 this.$bus.$on("itemImageLoad", () => { refresh(); }); 在原型上绑定$bus main.js vue.prototype.$bus = new Vue() // vue实例是可以作为事件总线的
在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、付费专栏及课程。

余额充值