vue：事件总线

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

#vue.js #javascript #前端

vue：事件总线

  1. 定义： 组件间的通信方式，可以用于任意组件之间的通信
  2. 安装全局事件总线：newVue{beforeCreate(){Vue.prototype.$bus=this}}
  3. 使用事件总线：
    A组件接收数据，methods:{ a(data){}} mounted(){this.$on('demo',this.a)}
    B组件传输数据，methods:{this.$bus.$emit('demo',this.data)}
  4. 在destryBefore钩子中解绑该组件用到的事件this.$bus.$off
vue：事件总线的$on写在哪里？
m0_64401231的博客
10-01 878
vue：事件总线的$on写在哪里？
Vue事件总线
热爱前端的大宝同学。
06-05 2082
主要总结了Vue事件总线模式的基本概念、实现方案、核心API、架构设计和实践案例等内容。
Vue 全局事件总线
PinkCoder
08-07 885
Vue 全局事件总线
Vue2：全局事件总线
Brave_heart4pzj的博客
01-20 1009
Vue
Vue全局事件总线
m0_61787196的博客
06-05 1458
Vue全局事件总线
彻底掌握 Vue 组件通信：事件总线封装与最佳实践
前端开发探索之旅
03-12 982
家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，求个啦～后续还有超多惊喜，别错过！
Vue 全局事件总线：Vue 2 vs Vue 3 实现
interest_ing_的博客
01-02 1019
在构建大型Vue应用时，跨组件通信是一个常见需求。Vue提供了多种通信方式，包括父子组件传参、兄弟组件通信、Vuex状态管理等。然而，对于简单的跨组件通信，全局事件总线（Event Bus）提供了一种轻量级的解决方案。本文将比较在Vue 2和Vue 3中实现全局事件总线的方法，并探讨各自的优缺点。
Vue-全局事件总线
m0_64081601的博客
03-23 3995
在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。
从 Vue3 回望 Vue2：事件总线的前世今生
Wannaer的博客
05-13 1286
Vue3 的出现代表着 Vue 框架架构思想的一次深刻转变：从基于选项的声明式组件模型，转向组合式、函数化、更可维护的逻辑表达方式。但 Vue3 的前身 ——Vue2，至今依然活跃于大量老项目中。正在接手一个 Vue2 项目在做 Vue2 向 Vue3 的迁移想深入理解 Vue3 各种通信方式的“由来”事件总线（Event Bus）。事件总线是 Vue2 中一种基于 Vue 实例事件机制的跨组件通信方式，本质上是一个全局的事件调度中心。一个组件触发事件另一个组件监听事件对比维度。
vue3从精通到入门19：事件总线Event Bus
qq_40358970的博客
04-10 1952
我们在中讲解了组件的基本传参方式，但是显示场景中，会遇到复杂的情况。但是官方文档并没有直接推荐或提及事件总线（Event Bus）作为一种组件间通信的官方方式。这是因为事件总线可能会引入全局状态管理的问题，使得应用的状态难以追踪和理解，尤其是在大型项目中。然而，在某些小规模的项目或特定的场景中，事件总线仍然可以作为一种简单快速的通信手段。
vue3跨组件(多组件)通信：事件总线【Event Bus】
从今年开始写写博客~~
02-08 9877
【vue3/vue2】event库概述：本次所使用到的库为通用库，若在node环境使用则无需npm安装，本身自带的；浏览器环境下使用才需要npm安装。events库是从 Node.js 上移植Events模块的功能，因此可用的API完全一致（除了仅限在node环境下使用的API）；若想进一步深入，去看node官网的event文档即可。（注意版本差异！根据npm文档的描述，该库目前并未同步最新Node里对应的events模块）在VUE3的官方文档中描述到：【平级组件或是跨越多层嵌套的组件间通信，
Vue 事件机制与自定义事件：解构事件传递与事件总线
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-26 735
在 Vue 中，事件机制是非常核心的一部分，它让组件之间能够高效地进行通信。无论是父子组件之间的通信，还是多个不相关的组件之间的事件传递，Vue 都提供了灵活的机制来应对这些需求。本文将带你深入了解 Vue 的事件机制和自定义事件，特别是如何利用事件总线解构事件的传递。Vue 的事件机制主要用于组件之间的通信。最基本的事件机制是通过 v-on指令（简称）绑定事件处理器，响应用户的交互操作。Vue 内部通过事件系统来进行数据流的传递和监听。父子组件之间的通信。
Vue 3 事件总线详解：构建组件间高效通信的桥梁
s13596191285的博客
03-23 178
在当今前端架构中，组件间通信始终是一大挑战。Vue 3 的发布带来了诸多革新，如何在复杂应用中实现高效、解耦的组件通信成为工程师们关注的焦点。本文深入探讨了基于 Vue 3 构建的事件总线机制，通过经典代码示例解析其原理，并结合未来微前端与实时系统的需求，提出前瞻性的应用思路。借助 Vue 3 提供的reactiveAPI，我们可以构建一个简单而高效的事件总线。// 使用 reactive 对象来存储事件与监听器if (!},if (!},if (!// 遍历所有注册的监听器并调用。
Vue——全局事件总线
求职大学生
06-01 373
它实际上使用了 Vue 的实例作为中央事件系统：任何组件都可以访问这个中央事件系统，以便在其他组件触发或响应某些事件。：事件总线可以视为一个全局的事件监听器：一个组件可以通过它来广播(emit)事件，其他组件则可以通过它来监听(on)这些事件。：在主要的 Vue 实例（通常在 main.js 或者 index.js 文件中）创建一个新的 Vue 实例来作为事件总线。：事件总线是一种非常灵活的通信方式，可以帮助你解决许多复杂的组件间通信问题。来发送事件，这个事件可以是任何你定义的事件。
Vue移动应用案例
2509_93942886的博客
11-24 226
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
Vue发布
2509_93943467的博客
11-24 129
以前在列表渲染成千上万条数据时，页面总会明显卡顿，但现在用新的函数处理数据，连滚动都流畅了许多。我测试了一个简单的待办应用，用Vue 3的函数配合和，代码量减少了30%，而内存占用却降低了。更惊喜的是，Tree-shaking支持现在更智能了，打包时只引入用到的功能，最终bundle大小能缩小40%以上。社区里已经涌现出许多基于Vue 3的UI库，比如PrimeVue和Quasar，它们都利用了新API的优势，组件更轻量、可定制性更强。举个例子，我以前处理用户认证时，得在多个组件里重复写登录状态的逻辑。
Vue视频处理案例一、核心思路与基础布局
最新发布
2509_93942763的博客
11-24 83
从视频的加载、播放控制，到进度条的交互、canvas的实时绘制，每个环节都可能遇到各种兼容性和性能问题。最终实现的效果是用户可以流畅地拖动进度条选择封面，选中的封面可以通过canvas的toDataURL方法转换成base64字符串，然后提交到后端保存。另外，为了更好的用户体验，可以在视频加载期间显示一个loading状态，在视频出错时给出友好提示。我们需要在用户拖动进度条时，实时地将当前时间点的视频帧绘制到canvas上。在实际测试中发现，如果每次鼠标移动都立即绘制画面，在低配电脑上会导致明显的卡顿。
Vue3响应式原理详解
2509_93942542的博客
11-24 383
当访问响应式对象的某个属性时，get拦截器会被触发，此时会执行track函数来收集当前的依赖（也就是正在运行的副作用函数）。当effect执行时，Vue3会将其设置为当前活跃的副作用函数，这样在访问响应式数据时，get拦截器就能准确知道是哪个effect依赖了这个数据。值得一提的是，Vue3的响应式系统是完全独立的模块，这意味着它可以在任何JavaScript环境中使用，不仅限于Vue框架。另外，Proxy的拦截是浅层的，对于嵌套对象需要递归代理，Vue3通过在get拦截器中自动解包来实现这一功能。
Vue数据结构与算法
2509_93941399的博客
11-24 150
例如，在渲染一个商品列表时，如果直接使用遍历一个未排序的数组，每次更新都可能引发不必要的DOM操作。例如，对于一个搜索功能，如果数据量较大，线性搜索会明显拖慢体验，改用二分搜索就能将时间复杂度从O(n)降到O(log n)。本质上，这都是算法在减少不必要的计算。比如，在管理一个多选标签组件时，用Set存储已选ID，检查是否选中只需O(1)时间，远比数组的方法高效。同时，Vue的响应式系统对对象变化很敏感，如果频繁增删数据，最好使用Vue.set或重新赋值来触发更新，避免直接修改导致的性能问题。
uniapp vue3事件总线
06-20
### 一、UniApp中的事件总线实现 在 UniApp 中，事件总线的实现与 Vue 的事件总线类似。以下是详细说明和代码示例： #### 1. 监听事件 `uni.$on()` 通过 `uni.$on()` 方法可以监听某个事件，并在事件触发时执行回调函数[^1]。 ```javascript // 在组件 A 中监听事件 export default { mounted() { uni.$on('eventName', (data) => { console.log('接收到的数据：', data); }); } }; ``` #### 2. 触发事件 `uni.$emit()` 通过 `uni.$emit()` 方法可以触发某个事件，并传递数据给监听者[^1]。 ```javascript // 在组件 B 中触发事件 export default { methods: { sendData() { const data = { message: 'Hello from Component B' }; uni.$emit('eventName', data); } } }; ``` #### 3. 只监听一次 `uni.$once()` 如果希望某个事件只被监听一次，可以使用 `uni.$once()` 方法[^1]。 ```javascript // 在组件 C 中只监听一次事件 export default { mounted() { uni.$once('eventName', (data) => { console.log('只接收一次的数据：', data); }); } }; ``` #### 4. 移除监听 `uni.$off()` 为了防止内存泄漏或重复监听，可以在组件销毁时移除事件监听[^1]。 ```javascript // 在组件 A 中移除事件监听 export default { beforeDestroy() { uni.$off('eventName'); } }; ``` --- ### 二、Vue 3 中的事件总线实现 在 Vue 3 中，由于 Vue 实例化方式的变化，事件总线的实现需要使用 `mitt` 或其他轻量级事件库。以下是具体实现方法： #### 1. 安装 `mitt` 库 首先需要安装 `mitt` 库作为事件管理工具。 ```bash npm install mitt ``` #### 2. 创建全局事件总线 在项目入口文件（如 `main.js`）中创建一个全局事件总线实例[^2]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import mitt from 'mitt'; // 创建事件总线 const bus = mitt(); // 将事件总线挂载到全局 const app = createApp(App); app.config.globalProperties.$bus = bus; app.mount('#app'); ``` #### 3. 使用事件总线 - **监听事件**：在组件中使用 `$bus.on()` 方法监听事件。 - **触发事件**：在组件中使用 `$bus.emit()` 方法触发事件。 - **移除监听**：在组件销毁时使用 `$bus.off()` 方法移除事件监听。 ```javascript // 在组件 A 中监听事件 export default { mounted() { this.$bus.on('hello', (data) => { console.log('接收到的数据：', data); }); }, beforeDestroy() { this.$bus.off('hello'); // 移除事件监听 } }; ``` ```javascript // 在组件 B 中触发事件 export default { methods: { sendData() { const data = { message: 'Hello from Component B' }; this.$bus.emit('hello', data); // 触发事件并传递数据 } } }; ``` --- ### 三、注意事项 1. **性能优化**：确保在组件销毁时移除事件监听，避免内存泄漏。 2. **跨组件通信**：事件总线适合简单的跨组件通信场景，但如果项目复杂度较高，建议使用 Vuex 或 Pinia 进行状态管理。 3. **兼容性**：在 Vue 3 中，原生的 `Vue.prototype` 不再支持直接扩展，因此推荐使用 `mitt` 替代传统事件总线[^2]。 --- ### 四、总结 无论是 UniApp 还是 Vue 3，事件总线都是一种有效的跨组件通信方式。但在实际开发中，需根据项目需求选择合适的工具和方法。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值