Vue-中央事件总线

中央事件总线

　　中央事件总线就是一种设计思想，通过设计一种方法使得组件之间的传值不再需要通过其他的组件来进行传值的思路。

　　第一种：通过Vue提供的技术来实现

要想实现的话首先要学习三个功能：

　　1.触发x组件的a事件: x.$emit("a事件",参数...)

　　2.给x组件绑定a事件 x.$on("a事件",监听器函数)

　　3.给x组件解绑a事件 x.$off("a事件",监听器函数)

我们可以根据给组件绑定以及触发事件的方式来达到目的

 this.$root.$on("box3data",(arg)=>{
	console.log(arg,"box2组件内部的打印")
 })
//这里给一个组件绑定事件

　　

<template>
	<div>
		<h1>box3</h1>
		<button @click="fn">box3--给box2传值</button>
	</div>
</template>

<script>
	export default {
		methods: {
			fn() {
				this.$root.$emit("box3data","box3的数据")
    	                        //这里再触发事件就完成了组件的传值  
			}
		}
	}
</script>    

　　但是在全局进行事件的绑定的话会造成全局污染，所以我们可以换一种思路来进行绑定

Vue.prototype.$bus=new Vue({
	data:{
		arr:[]
	},
	methods:{
		on(eventname,callback){
			if(this.arr.includes(eventname)){
				throw "eventname events already regist!!"
			}else{
				this.arr.push(eventname)
				this.$on(eventname,callback)
			}		
		},
		emit(eventname,...arg){
			
			this.$emit(eventname,...arg)
		},
		off(eventname,callback){
			this.$off(eventname,callback)
		}
	}
})
//在main.js中绑定方法可以达到优化的效果

　　

<template>
	<div>
		<h1>box2</h1>
	</div>
</template>

<script>
	export default {
		mounted() {
			this.$bus.on("box3data",(arg)=>{
				console.log(arg,"box2组件内部的打印")
			})
		}
	}
</script>
//在一个组件中绑定事件

　　

<template>
	<div>
		<h1>box3</h1>
		<button @click="fn">box3--给box2传值</button>
	</div>
</template>

<script>
	export default {
		methods: {
			fn() {
				this.$bus.emit("box3data", "box3的数据")
			}
		}
	}
</script>
//在另一个组件触发事件