Vue中全局事件总线

最新推荐文章于 2025-11-24 03:44:17 发布

原创最新推荐文章于 2025-11-24 03:44:17 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

博客介绍了Vue中全局事件总线的相关内容。成为全局事件总线需满足属性可被所有组件获取，拥有$on、$off、$emit方法。其适用于向孙子组件传值，可避免层层传递。创建时统一在项目入口Vue实例的beforeCreate()钩子函数中进行。

Vue中全局事件总线创建。

要想成为全局事件总线要满足下面俩个条件

属性可以被所有组件获取
拥有$on,$off,$emit这三个Vue原型上的方法

2.全局事件总线一般适用在哪比较好？

一般使用在传给孙子组件上，通过全局事件总线，避免了层层传递。

3.全局事件总线的创建？

统一创建在项目入口Vue实例中的beforeCreate()钩子函数中

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ytfdcxy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue事件总线（EventBus）、$on、$emit、$off

^_^

06-29

4万+

在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用发布事件 - 传...

Vue——全局事件总线

求职大学生

06-01

375

它实际上使用了 Vue 的实例作为中央事件系统：任何组件都可以访问这个中央事件系统，以便在其他组件触发或响应某些事件。：事件总线可以视为一个全局的事件监听器：一个组件可以通过它来广播(emit)事件，其他组件则可以通过它来监听(on)这些事件。：在主要的 Vue 实例（通常在 main.js 或者 index.js 文件中）创建一个新的 Vue 实例来作为事件总线。：事件总线是一种非常灵活的通信方式，可以帮助你解决许多复杂的组件间通信问题。来发送事件，这个事件可以是任何你定义的事件。

参与评论您还未登录，请先登录后发表或查看评论

【Vue全局事件总线详解】

热门推荐

小田是个程序员的博客欢迎你的到来呀~

04-05

1万+

全局事件总线是一种组件间通信的方式，适用于任意组件间通信。全局事件总线并不是插件，配置文件等等，事件总线是程序员在做Vue开发中总结积累的一套方法，是一套规则，只要满足这套规则，就可以实现组件间的通信。

Vue-全局事件总线

m0_64081601的博客

03-23

3998

在发送数据的组件中触发事件并传递数据（给school组件的按钮绑定事件，触发自定义事件）全局事件总线实现了任意组件间的通信，有效简化了开发过程中一些数据传递的操作，同时也提高了程序的性能，但是在开发中，使用全局事件总线时要根据实际业务情况进行选择，避免事件总线太繁琐1.父传子：props2.子传父：props(要在父组件中提前写好函数，将函数传递给子组件，让子组件合适时机触发，将子组件数据传递给父组件）自定义事件（通过v-on,ref给子组件绑定自定义事件）3.兄弟组件或者爷孙组件：事件总线。

Vue中全局事件总线使用

weixin_42202992的博客

02-28

226

Vue中全局事件总线的使用

Vue中全局事件总线的使用(一看就会)

过去属于死神，未来属于自己

05-15

2176

例如：针对图中的A组件和B-a组件，它们既不是父子组件，也不是兄弟组件。此时，我们可以考虑使用全局事件总线进行值传递。具体使用方式如下:假设任意组件B中需要任意组件A中的某些数据B组件接收A组件的值，4个步骤:1. main.js中安装全局事件总线2. 组件A中用this.$bus.$emit('事件名'，val)发送要传的数据3. 组件B中用this.$bus.$on('事件名'，callback) 监听(接收)A传过来的数据。

Vue-全局事件总线_vue 全局事件总线

2401_84446548的博客

04-29

989

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue 中的全局事件总线

yxh_live的博客

05-26

551

Vue 中的全局事件总线：实现组件间通信的便捷方式

Vue全局事件总线

weixin_74261199的博客

03-18

948

1）在main.js中创建vue实例之前通过指定全局事件管理者2）在组件挂载时通过this.$bus.$on('事件名',监听函数)绑定事件3）通过另一个组件的this.$bus.$emit('事件名',数据)来触发该组件的事件，并为其传输数据,实现组件间通信。

Vue 全局事件总线

Errol's Blog

04-10

8549

Vue 全局事件总线

dax1-zyh#Steps-to-Master#Vue中全局事件总线（GlobalEventBus）的创建与使用方法1

07-25

全局事件总线一种组件间通信的方式，适用于任意组件间通信安装全局事件总线// 安装全局事件总线，$bus就是当前应用的vm使用全局事件总线接收数据A组件想要接收数

vue中全局事件总线是如何实现的

08-12

问题核心：Vue全局事件总线的实现原理。从引用中提取关键点： - 引用[1]：全局事件总线是借助一个独立的Vue实例作为事件中心。 - 引用[2]：核心思想是使用一个Vue实例作为事件中心，实现组件间解耦通信。 - 引用[3...

vue3实现全局事件总线

weixin_41463944的博客

04-22

1467

vue3实现全局事件总线

Vue3全局事件总线的跨组件传递（mitt篇）

violeteverdack的博客

11-17

701

在vue3中，全局事件总线可通过mitt轻量级事件库或者vue自带的组合式API--reactive来实现，本篇仅进行mitt的实现。全局事件总线是一种简化的跨组件通信方法，尤其适用于不直接存在父子关系的组件之间的消息传递，比props和emit更好用也更简介。在项目对应根目录下创建一个名为eventBus.js的文件。推荐npm后yarn安装。

Vue音频处理开发

最新发布

2509_93946247的博客

11-24

456

举个例子，在data里定义一个audioContext对象和一个isPlaying布尔值，再通过methods里的函数来触发播放或暂停，界面状态自动更新，不用手动操作DOM。另外，Vue 3的setup语法糖里，用reactive定义播放器实例，比Options API更灵活，尤其是需要动态添加音频滤镜时。记得控制帧率，太高了卡顿，太低了动画跳帧，我一般用60fps做节流。另外，音频缓冲过长会影响体验，可以用Vue的异步组件配合loading状态，先显示占位图，等解码完成再启用控制按钮。

Vue3项目实战

2509_93946337的博客

11-24

368

还有个细节，Pinia的store里用actions定义方法时，不用写commit了，直接赋值就行，比Vuex简单不少。举个实际例子：订单列表页需要支持按状态筛选和导出Excel，我单独建了个useOrderTable.js，里面用ref存筛选条件，computed处理过滤后的数据，onMounted里调接口初始化。我在用户管理模块里试过，把一个权限列表从数组改成树结构，用reactive包裹后，随便增删改查都能实时渲染，连watch都不用额外配置。部署时遇到个诡异问题：开发环境跑得好好的，生产环境白屏。

Vue 项目实战《尚医通》，路由鉴权完成，笔记71

Rockandrollman的博客

11-23

173

Vue 项目实战《尚医通》，路由鉴权完成，笔记71

Vue移动应用案例

2509_93942886的博客

11-24

369

从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。

Vue文档

2509_93942660的博客

11-24

294

简单说，基础类型用ref，引用类型用reactive。至于emit，现在都推荐用defineEmits定义事件类型，TypeScript支持杠杠的。遇到复杂业务逻辑时，getter能帮大忙，把计算属性抽到store里，组件代码顿时清爽不少。如果组件用了v-if，这时候元素可能还没渲染，得用nextTick兜底。比如按钮重复点击问题，用v-throttle直接解决，比在每个methods里写防抖逻辑方便多了。比如v-for和v-if的优先级问题，比如key的重要性，这些看似基础的概念往往最能考验功底。