Vue $bus被多次触发

最新推荐文章于 2025-04-06 23:55:05 发布
最新推荐文章于 2025-04-06 23:55:05 发布
阅读量252 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/By2650/article/details/146509800
版权

最近遇到一个问题：Vue $bus被多次触发。

后面找到了解答：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发。

解决办法：

以上便是今天的全部内容。好了，今天的文章分享就到这里了，希望对大家的学习有所帮助哦~

By爱分享
关注
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在使用bus.$on接收事件之前，应该先使用this.$bus.$off方法注销事件，防止出现多次绑定导致的重复事件处理： ```javascript this.$bus.$off('test'); // 先注销事件 this.$bus.$on('test', function(msg) { // ...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
这有助于避免因多次触发事件导致的意外行为。例如，如果你有一个组件在加载时需要获取数据，但只需要获取一次，就可以使用 `$once` 来监听特定的加载完成事件，确保事件处理函数只执行一次。 5. **$off** `$off` ...
Vue3响应式引擎解密：从依赖追踪到性能调优的深度之旅
桂月二二博客
04-06 334
本文深入揭秘Vue3响应式系统的核心原理与优化实践，涵盖从基础响应原理到百万级数据场景优化的全链路方案。转发本文至技术群聊可获得完整性能优化工具包，访问文末「性能实验室」体验实时响应追踪工具！
el-table 表格内容超出 省略号 显示
2301_76162638的博客
04-03 245
【代码】el-table 表格内容超出 省略号 显示。
如何在大型项目中组织和管理 Vue 3 Hooks？
莫循的AI编程博客
04-06 659
在大型项目中，通过分层管理、模块化设计和类型安全，可以高效组织和管理 Vue 3 Hooks。将 Hooks 分为核心层、领域层、UI 层和共享层；使用 TypeScript 确保类型安全；通过工具和规范提升代码质量。
Vue2与Vue3不同
m0_74416054的博客
04-05 809
一、Vue3 设计思想与 Vue2 差异对比。三、Vue Router 4 核心变化。二、Vue3 核心变化详解。
Vue 数据传递流程图指南
m0_68778396的博客
04-03 1262
今天，我们探讨一下 Vue 中的组件传值问题。这不仅是我们在日常开发中经常遇到的核心问题，也是面试过程中经常被问到的重要知识点。无论你是初学者还是有一定经验的开发者，掌握这些传值方式都将帮助你更高效地构建和维护 Vue 应用。
在Vue中如何高效管理组件状态
Rverdoser的博客
04-03 534
对于复杂的应用，使用Vuex是一个非常有效的状态管理方案。如果你在使用Vue 3，Composition API提供了ref、reactive等函数，允许你在setup函数中更灵活地管理状态。对于简单的组件，你可以直接在组件内部使用data属性来管理状态，并通过props从父组件接收数据。Action：类似于mutation，不同之处在于action提交的是mutation，而不是直接变更状态。通过$emit和$on，可以在不使用Vuex的情况下，在兄弟组件或非父子关系的组件间进行通信。
Vue 中 this.$emit(“update:xx“,value) 和 :xx.sync 实现同步数据的做法
轻风细雨_林木木
04-02 312
在 Vue 2.x 中，和xx.sync都是用来实现父子组件之间的数据同步的方式，它们背后的工作原理有些相似，但语法上有所不同。让我们逐个详细解释这两者的使用方式。xx.syncxx.sync是 Vue 提供的一种语法糖，用来简化子组件和父组件之间数据同步的操作。它的工作原理是自动化地监听update:xx事件并更新父组件的数据。实际上，xx.sync是v-bind和v-on的组合，背后也调用了。
Element Plus 常用组件
2401_84080967的博客
04-02 1176
本次我使用到的按钮如下。
如何用 Three.js 和 Vue 3 实现 3D 商品展示
idree的博客
04-03 970
如何用 Three.js 和 Vue 3 实现 3D 商品展示
Vue3 Composition API即组合式API完全指南
莫循的AI编程博客
04-02 1159
组合式API（Composition API）是Vue3的核心特性，它通过逻辑功能聚合和高复用性解决了复杂组件的代码组织问题。功能聚合：将同一功能的响应式数据、计算属性、方法等集中管理逻辑复用：通过自定义Hook实现跨组件逻辑复用类型支持：完美支持TypeScript类型推断渐进式：可与选项式API混合使用return {count,double,increment,reset// 组件使用</script>
SpringBoot + Netty + Vue + WebSocket实现在线聊天
weixin_73683794的博客
04-04 1731
最近想学学WebSocket做一个实时通讯的练手项目 主要用到的技术栈是WebSocket Netty Vue Pinia MySQL SpringBoot，实现一个持久化数据，单一群聊，支持多用户的聊天界面
VUE+SPRINGBOOT+语音技术实现智能语音歌曲管理系统
p6448777的博客
04-05 194
【代码】VUE+SPRINGBOOT+语音技术实现智能语音歌曲管理系统。
001 vue
m0_46695127的博客
04-05 670
001 vue
vue实现消消乐
cf8833的博客
04-02 156
说明：vue实现消消乐。
vue猜词游戏
最新发布
cf8833的博客
04-06 152
目标单词从预设词库（DEFAULT_WORDS）中随机选取，均为5字母单词（如apple、zebra等）。​输入方式：通过文本输入框输入，按回车键提交。最多允许 ​6次猜测，用尽后游戏失败。​有效性验证：单词需存在于预设词库中。Vue Wordle 游戏规则总结。说明：我希望用vue实现猜词游戏。​长度限制：必须输入恰好5个字母。​黄色：字母存在但位置错误。​灰色：字母不在目标单词中。​绿色：字母位置完全正确。
盒子拖拽位置、更改
梦寻汝的博客
04-03 138
【代码】盒子拖拽位置、更改。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值