2021-11-13

大概原理

任意组件的通信，传递数据。本质就是用自定义事件，是给$bus绑定的。

$bus在Vue.prototype上，所有组件可看到。

1. 在main.js安装全局事件总线。
2. 接受数据.vue在生命周期mounted() {}或create(){}用this.$bus.$on()绑定自定义事件和触发函数，
3. 发出数据.vue组件中用this.$bus.$emit()触发事件，并传递数据给函数，触发可以写在要发送的数据变化的方法内
4. 记得在接收数据的vue中beforeDestroy(){}中用this.$bus.$off()卸载绑定，记得一定要传递解绑的事件名。要不然会全部解绑

使用

// 安装全局事件总线
new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
}) 

发送数据，写在要发送的数据更新的后面，这样每次变化就会将新的数据传递

// 参数一：事件渠道发送标识，与注册标识一致。第二个是事件要发送的数据
xxxx(){
	this.data = !this.data
	this.$bus.$emit('xxxx',this.data)
}	

接收数据A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

方式一
对于传递过来的参数可以直接传递到方法，每次接收数据，就调用新发送过来的数据作为参数。

methods(){
	demo(data){
	console.log(data)
	}
},
mounted(){
	// 参数一：事件渠道接收标识，与触发标识一致。参数二：事件回调函数，函数内携带事件传递的数据
	 this.$bus.$on('xxxx',this.demo)
}

方式二
对于传递过来的参数，可以更新到data配置项内部，利用watch监视变化。

data(){
	return{
		isShow:true
	}	
}，
watch(){
	isShow(newValue,oldValue){		
		if(){
		...
		}else{
		...
		}
	}
},
methods(){
	
}
mounted(){
	let _this = this
	this.$bus.$on('xxxx',(isShow){
		// isShow 是通过xxxx这个线传递过来的数据
		_this.isShow = isShow    
	})
}