Vue全局事件总线（GlobalEventBus)

慕宁儿

于 2021-08-11 16:32:15 发布

阅读量322

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Stead_Fast/article/details/119610345

25 篇文章

订阅专栏

本文介绍了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('事件名')  //注意一定要写事件名
}