中央事件总线插件 vue-bus

bus作为一个简单的组件传递事件，用于解决跨级和兄弟组件通信的问题。
vue-bus 插件像vue-router和Vuex一样，给Vue添加一个属性$bus,并代理 $emit、$on、$off三个方法。

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;

语法提示：

emit(event, ...args)

中的…args 是函数参数的解构，因为不知道组件会传递多少个参数，使用…args 可以把从当前参数（这里是第二个）到最后的参数都获取到。

Counter.vue组件

<template>
	<div>
		{{ number }}
		<button @click="handleAddRandom">随机增加</button>
	</div>
</template>
<script>
	export default {
		props: {
			number: {
				type: Number
			}
		},
		methods: {
			handleAddRandom () {
				const num = Math.floor(Math.random () * 100 +1);
				this.$bus.emit('add', num)
			}
		}
	};
</script>
<style scoped></style>

main.js使用插件

import VueBus from './pages/VueBus/vue-bus';
Vue.use(VueBus);

在index.vue使用Counter组件

<template>
	<div>
		随机增加：
		<Counter :number="number"></Counter>
	</div>
</template>
<script>
import Counter from '../pages/vueBus/Counter'
export default {
	 components: {
	  	Counter
	  },
	  created () {
	  	this.$bus.on('add', num => {
	  		this.number += num;
	  	})
	  },
};

使用以上方式解决了跨组件通信的问题，而且通过插件的形式使用后，所有的组件都可以直接用 $bus,无需每个组件都导入bus组件。

注意

1、$bus.on 应该在 created 钩子内使用，如果在 mounted 使用，他可能接收不到其他组件来自 created 钩子内发出的事件；

2、使用了$bus.on，在beforeDestory狗子里应该使用$bus.off解除，因为组件销毁后，没必要把监听的句柄存在vue-bus里了，所以index.vue中应该再加入

beforeDestory () {
	this.$bus.off('add', this.handleAddRandom)
}