Vue全局Bus

Vue组件嵌套太深，要实现组件之间的通信，又因项目太小不想用Vuex怎么办，来一起写一个Vue全局Bus吧。

众所周知，一个中央事件总线bus，我们可以用来解决兄弟组件和嵌套很多层的组件之间的通信问题，一个页面 一个页面的引入又太麻烦，直接写一个Vue插件全局引入。

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

然后把这个js文件在main.js引入

import Bus from "./libs/bus";
Vue.use(Bus); // 让插件可以使用vue

例子

首先我们创建一个组件center.vue

export default {
	name: "center",
	methods: {
		handlerAdd () {
			this.$bus.emit("add", 1);
		}	
	}
}

然后再创建一个组件right.vue

export default {
	name: "center",
	created () {
		this.$bus.on("add", num => {
			console.log(num);
		})
	}
}

这里需要注意的是on事件最好在created钩子函数里面执行，如果放在mounted钩子函数里面可能接收不到其他组件在created钩子里面触发的事件。

只是刚才那样的写话，当你组件销毁了再次创建组件，就会执行两次on的回调，以此类推，所以我们需要在适当的时间摧毁他。

export default {
	name: "center",
	methods: {
		handlerNum (num) {
			console.log(num)
		}
	},
	created () {
		this.$bus.on("add", this.handlerNum);
	},
	beforeDestory() {
		this.$bus.off("add", this.handlerNum);
	}
}

这样每次只会执行一次了。

结语

在我们平时的项目中，项目不是很复杂的情况下，我推荐用全局bus来处理兄弟组件和嵌套较深的组件之间的通信问题，项目太小引入Vuex太麻烦，有点大材小用了。