[JavaScript知识库]使用 vue 事件总线（EventBus）

EventBus的简介

EventBus又称为事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

如何使用EventBus

初始化

首先创建事件总线并将其导出，方便其他模块使用或者监听它，有两种方式来处理

第一种，创建一个event_bus.js文件

// event_bus.js

import Vue from 'vue';
export const EventBus = new Vue();

另外一种方式，直接在main.js把EventBus挂载到Vue原型上面

// main.js

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

发送事件（EventBus.$emit）

// a.vue
<template>
	<button @click="decrease">-</button>
</template>

<script>
	import { EventBus } from '../event_bus.js';
	export default {
		name: 'a',
		data () {
			return {
				num: 1,
				deg: 180
			}
		},
		
		methods: {
			decrease () {
				EventBus.$emit('decreased', {
					num: this.num,
					deg: this.deg
				})
			}
		}
	}
</script>

// b.vue
<template>
	<button @click="increment">+</button>
</template>

<script>
	import {EventBus } from '../event_bus.js';
	export default {
		name: 'b',
		data () {
			return {
				num: 1,
				deg: 180
			}
		},

		methods: {
			increment () {
				EventBus.$emit('incremented', {
					num: this.num,
					deg: this.deg
				})
			}
		}
	}
</script>

上面我们在a和b分别发送了decreased和incremented,接下来，需要在另一个组件中接收这两个事件

接收事件（EventBus.$on）

现在可以在组件App.vue中使用EventBus.$on接收事件

<template>
	<div id="app">
		<div :style="{transform: 'rotateY(' + degValue + 'deg)'}"></div>
		<div class="front">
			<div class="increment">
				<A />
			</div>
			<div class="show-front">
				{{ fontCount }}
			</div>
			<div class="decrement">
				<B />
			</div>
		</div>
		<div class="back">
			<div class="increment">
				<A />
			</div>
			<div class="show-back">
				{{ backCount }}
			</div>
			<div class="decrement">
				<B />
			</div>
		</div>
	</div>
</template>

<script>
	import A from './components/a';
	import B from './components/b';
	export default {
		name: 'App',
		components: {
			A,
			B
		},
		data () {
			degValue: 0,
			fontCount: 0,
			backCount: 0
		},
		
		mounted () {
			EventBus.$on('incremented', ({num, deg}) => {
				this.fontCount += num;
				this.$nextTick(() => {
					this.backCount += num;
					this.degValue += deg;
				})
			});
			EventBus.$on('decreased', ({num, deg}) => {
				this.fontCount -= num;
				this.$nextTick(() => {
					this.backCount -= num;
					this.degValue -= deg;
				})
			})
		}
	}
</script>

移除事件监听者

import { EventBus } from './event_bus.js';
EventBus.$off('decreased', {})

或者使用全局EventBus挂载到Vue.prototype上面

// vue_bus.js

const install = function (Vue) {
	const Bus = new Vue({
		methods: {
			emit (event, ...args) {
				this.$emit(event, ...args);
			},
			on (event, callback) {
				this.$on(event, callback);
			},
			off (event, callback) {
				this.$off(event, callback);
			}
		}
	});
	Vue.prototype.$bus = Bus;
};

export default install;

在main.js中使用插件

import VueBus from './vue_bus';
Vue.use(VueBus);

使用vue-bus有两点需要注意，第一是 $bus.on应该在created钩子内使用，如果在mounted使用，它可能接受不到其他组件来自created钩子发出的事件；第二点是使用了$bus.on，在beforeDestroy钩子里应该使用$bus.off解除

created () {
	this.$bus.on('handleChange', this.handleClick);
}

beforedestroy () {
	this.$bus.off('handleChange', this.handleClick);
}