vue2关于EventBus使用

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

初始化

import Vue from 'vue';

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

监听和触发

1. 监听的组件

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

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

2. 触发事件

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

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