vue2关于EventBus使用

梓喻

已于 2022-08-10 13:11:03 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue js 文章标签： vue.js eventbus vue2 事件监听事件触发

于 2022-07-30 17:43:36 首次发布

本文链接：https://blog.youkuaiyun.com/wzp20092009/article/details/126075260

js 同时被 2 个专栏收录

73 篇文章

订阅专栏

vue

35 篇文章

订阅专栏

本文详细介绍了如何在Vue2应用中使用EventBus进行组件间的通信。首先，通过在Vue原型上挂载新的Vue实例来初始化EventBus。接着，展示了在组件的`mounted`生命周期钩子中监听事件，并在`beforeDestroyed`中解绑，以确保组件销毁时避免内存泄漏。同时强调了监听和触发事件的注意事项，包括事件监听的时机选择和事件名称的唯一性。

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

这一版主要讲 EventBus 在 vue2 中的使用

初始化

import Vue from 'vue';

Vue.prototype.$EventBus = new Vue();

监听和触发

监听的组件

export default {
	mounted() {
		this.$EventBus.$on('eventName', (res) => {
			//	handle event data
		});
	},
	beforeDestroyed() {
		this.$EventBus.$off('eventName');
	}
}

注意:
1> 建议事件监听放在组件挂载时去监听，如果放在组件生命周期 created 中监听会导致切换组件时不生效。
2> 监听事件也需要在组件生命周期结束时解绑该监听事件

触发事件

export default {
	methods: {
		emitEvent() {
			this.$EventBus.$emit('eventName', {
				//	data about event need to send
			})
		}
	}
}

注意:
1> 触发 EventBus 事件需要其它组件监听该事件
2> 建议事件名唯一，避免组件切换、路由切换时不同生命周期导致重复监听