Vue全局事件总线(GlobalEventBus)

本文介绍了Vue全局事件总线的安装和使用方法,通过全局事件总线实现不同组件之间的通信。在组件销毁时需要注意解绑事件,以避免内存泄漏。

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

意义:实现任意组件间的通信
请添加图片描述
保证:1.所有组件都能找到x

2.x可以调用到$on,$off,$emit

安装全局事件总线

main.js里创建Vue实例时,在beforeCreate()钩子中配置$bus$bus就是当前应用的vm

new Vue({
	el:'#app',
	render:h => h(App),
	beforeCreate(){
		Vue.prototype.$bus = this  //安装全局事件总线
	}
})

使用事件总线

接收数据的组件中给this.$bus绑定事件,提供数据的组件中调用this.$bus.$emit

//接收数据组件,回调可以配置到methods中,使用this.事件名调用
this.$bus.$on('事件名'()=>{})

//提供数据组件
this.$bus.$emit('事件名',参数)

注意:在组件销毁之前将当前组件上给$bus绑定的事件解绑

beforeDestroy(){
	this.$bus.$off('事件名')  //注意一定要写事件名
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值