vue兄弟组件传值$on多次执行的问题

最新推荐文章于 2025-06-25 09:20:09 发布
最新推荐文章于 2025-06-25 09:20:09 发布
阅读量699 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： js vue BUG
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39818813/article/details/104594701
本文介绍在Vue项目中如何正确使用Event Bus进行组件间通信，避免潜在的事件监听冲突。通过在父组件中先注销事件再接收的方式，确保组件通信的准确性和项目的稳定性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 在父组件接收的时候，先把事件注销：Bus.$off("saveTheme")，然后再接收

  mounted(){
    Bus.$off("saveTheme")
    Bus.$on("saveTheme", (themeList) => {
      console.log(themeList,"子")
    })
  },

 

vue自定义子组件，并分享使用不同方法进行父子组件传值（最全整合，含实例）
向宇
12-28 1118
在 Vue 中，父子组件之间的传值有多种方式，不同的方式适应不同的场景。下面是 Vue 中父子组件传值的几种常见办法，以及每种方式的详细实例。方法适用场景优点props父组件向子组件传递数据简单、直观、符合单向数据流$emit子组件向父组件传递数据简单、直观、父子组件数据流通的标准方式v-model实现父子组件双向绑定数据简化双向绑定操作祖先组件与后代组件传值（跨级）跨级传值，避免多层组件传值的繁琐Vuex多个组件之间共享数据，跨组件传值适用于大型应用，集中管理状态，方便维护。
vue3 兄弟间传值--两种方式
m0_65730686的博客
10-18 3332
vue3 兄弟间传值
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
10-20
本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例，非常具有实用价值，需要的朋友可以参考下。
uni.$emit和uni.$on会重复执行多次的坑
最新发布
weyy002的博客
06-25 192
在uniapp中的onshow使用uni.emit或uni.$on进行数据传递时，有的时候会发现事件被执行两次或多次，这个坑可能很多人都遇到过，最近遇到了这个坑。解决很简单，只要在执行前清理一次即可。
Vue兄弟组件之间的传值$on和$emit
qq_23159841的博客
10-31 809
其实就是由vm.$emit触发$on定义的事件 vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi') // => "hi" Bus.js import Vue from 'vue' export default new Vue 组件WindowOnresize <template> <div></div> </template> &..
Vue 用$emit与$on来进行兄弟组件之间的数据传输通信
weixin_61945023的博客
07-22 778
Vue 用$emit与$on来进行兄弟组件之间的数据传输通信
vue踩坑填坑（二）：组件之间的传值问题
around_primary的博客
06-13 3594
组件开发中难免会遇到子组件父组件之间以及兄弟组件之间的传值问题。1、父组件传值给子组件：如果父组件需要将placeholder值传给子组件，则在父组件标签中定义：placeholder="XXX",子组件在data中定义props:['placeholder']来接受，这样接收过来的placeholder就可以直接用this.label取出使用。注意：props属性只可以取出使用，并不能改变其值。...
详解Vue中组件传值的多重实现方式
01-19
vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了，如果有不理解的，俺这儿有篇不错的文章，链接奉上~ ...2.兄弟组件或无关系组件之间的传值 ...
事件总线：vue中$bus的使用和涉及到的问题(兄弟组件之间传值)
bigdargon的博客
12-12 863
$bus传值
Vue非父子组件之间传值
01-08
在Vue.js框架中，组件是构建用户界面的基本单元，它们可以独立地管理和更新各自的视图。然而，在实际应用中，我们常常需要非父子组件之间进行通信。由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被...
Vue组件通信$attrs、$listeners实现原理解析
10-14
1. **组件传值**：当祖父组件向父亲组件传递数据，而这些数据需要进一步传递给孙子组件，并且孙子组件需要调用祖父组件的方法时，可以利用 `$attrs` 获取未声明的属性并使用 `$listeners` 传递事件监听器。...
vue中bus.$on事件被多次绑定
weixin_30532987的博客
08-09 303
问题描述：只要页面没有强制刷新，存在组件切换，bus.$on方法会被多次绑定，造成事件多次触发 解决办法一：在每次调用方法前先解绑事件( bus.$off )，然后在重新绑定( bus.$on ) bus.$off('pagechangep'); //先解绑，不然会多次出发 bus.$on('pagechangep',function(i){ that.publi...
vue中8种组件通信方式,纯干货！值得收藏
A_soulmate的博客
07-22 1642
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之...
触发的时候页面中的$on事件多次触发
chelflan's blog
04-11 3340
**eventBus中央通信，会触发多次的原因**原因1.第一次触发的时候页面中的on事件没有被触发2. 为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多解答：1. 当我们还在页面A的时候，页面B还没生成，也就是页面B中的 created中所监听的来自于A中的事件还没有被触发。这个时候当你A中emit事件的时候，B其实是...
vue组件通信&&v兄弟组件通信eventbus遇到的问题（多次触发、第一次不触发）
weixin_33758863的博客
10-12 1079
组件通讯包括：父子组件间的通信和兄弟组件间的通信。在组件化系统构建中，组件间通信必不可少的 （vuex以后再说）。 父组件--> 子组件 1. 属性设置 父组件关键代码如下： 1 <template> 2 <Child :child-msg="msg"></Child> 3 </template> 子组件关键代...
vue mounted方法执行多次问题的解决方案
热门推荐
Run_youngman的博客
08-01 2万+
问题背景 今天帮忙解决问题的时候遇到了一个很奇怪的问题，点击一个按钮跳转的另一个页面，他的mounted方法执行了三遍，想到这个问题我确实是很困惑的，查阅网络资料说是v-if和v-show的问题，线下我自己验证了一下，确实没有找到使用v-if会导致mounted多次的情况。 解决思路 首先遇到这个问题我就在思考，是不是某些原因引发了组件生命周期的消亡，于是我在mounted函数周围添加了destr...
Vue 组件之间传值(传递数据)的5种方法 (七)
weixin_46022934的博客
12-10 6676
1.父传子:通过自定义属性来进行传值 2.在父组件使用子组件的时候,给父组件添加自定义属性,属性值为传递的数据 3.在子组件通过 props接受父组件的数据,props值是数组,元素是自定义属性 4.在子组件中使用的时候与data数据一样
vue兄弟组件间通信&eventbus遇到的问题（多次触发、第一次不触发）
Schaffer的博客
11-18 5166
EventHub 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。 EventHub 想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。 而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个： 监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这些功能
uni.$on
03-29
### uni.$on 方法使用说明 `uni.$on` 是 UniApp 提供的一种全局事件监听机制，主要用于跨页面或组件之间的通信。通过 `uni.$on` 可以监听由 `uni.$emit` 发送的事件，并在回调函数中处理接收到的数据。 #### 基本语法 ```javascript uni.$on(eventName, callback); ``` - **eventName**: 字符串类型，表示要监听的事件名称。 - **callback**: 函数类型，当指定事件被触发时执行的回调函数。该函数可以接收参数，这些参数是由 `uni.$emit` 发送过来的数据。 --- #### 示例代码 以下是完整的示例代码展示如何使用 `uni.$on` 进行跨页面传值： ##### 页面A (发送方) ```vue <template> <view> <button @click="sendMessage">发送消息</button> </view> </template> <script> export default { methods: { sendMessage() { const message = "你好，这是来自页面A的消息"; uni.$emit("customEvent", message); // 触发名为 customEvent 的事件并传递数据 } } }; </script> ``` ##### 页面B (接收方) ```vue <template> <view> <text>等待接收消息...</text> </view> </template> <script> export default { onLoad() { uni.$on("customEvent", this.handleMessage); // 监听名为 customEvent 的事件 }, beforeDestroy() { uni.$off("customEvent", this.handleMessage); // 移除事件监听以防内存泄漏 }, methods: { handleMessage(data) { console.log("接收到的消息:", data); // 输出接收到的数据 } } }; </script> ``` --- #### 注意事项 1. **生命周期管理** 如果不在适当的时候移除事件监听器 (`uni.$off`)，可能会导致内存泄漏或其他不可预期的行为[^3]。 2. **事件名唯一性** 确保使用的事件名称在整个应用范围内具有唯一性，以免与其他模块的事件冲突[^5]。 3. **异步特性** `uni.$on` 和 `uni.$emit` 并不保证同步执行，因此需要合理设计业务逻辑来应对可能的时间差问题[^4]。 --- #### 扩展功能 除了基本的单次监听外，还可以实现多次监听或者动态绑定多个事件处理器。例如： ```javascript // 动态绑定多个事件处理器 const handler1 = (data) => console.log("Handler1 received:", data); const handler2 = (data) => console.log("Handler2 received:", data); uni.$on("multiEvent", handler1); uni.$on("multiEvent", handler2); // 后续可以通过 uni.$emit('multiEvent', someData) 来触发这两个处理器 ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值