vue兄弟组件之间的传值,bus运用,beforeDestroy销毁,Bus.$off

本文详细介绍如何在Vue项目中实现兄弟组件间的通信,包括创建并使用全局事件总线(bus.js),以及如何正确地发送和接收事件。同时,文章还讨论了在使用过程中可能遇到的问题及解决方案,如组件未渲染完成导致的传值失败和事件重复触发。

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

vue兄弟组件之间的传值

1、建立一个单独的文件bus.js

import Vue from 'vue'
export default new Vue()

2、传递事件

// 传递事件
import Bus from '你的路径/bus.js'
// 在methods中:
bus() {
  Bus.$emit('eventName', param)
}

3、接收事件

// 接收事件
import Bus from '你的路径/bus.js'
// 在mounted中:
Bus.$on('eventName', (e) => {
  console.log('穿过来的数据' + e)
})

vue、bus 使用遇到的坑,组件之间无法传值;vue、bus 第一次获取不到值,后面数据叠加

问题定位:

  1. 出现无法传值的情况,检查传值过程中组件是否还没有渲染;可能出现的情况是:组件被if,在你使用 Bus.$emit() 时组件还没有渲染出来;
  2. 出现点击重复执行情况,检查bus是否使用后销毁;
    使用Bus.$on后,需要生命周期beforeDestroy中销毁:
beforeDestroy() {
  Bus.$off("onSearchwordKey");
}

 

如果对您有所帮助,点个赞收个藏吧~Thanks♪(・ω・)ノ (✪ω✪) ᕦ(・ㅂ・)ᕤ!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值