兄弟组件通信--中央事件总线 vue bus 的使用

兄弟组件之间通信，除了可以使用公共状态仓库vuex之外，还可以使用中央事件总线vue bus进行数据的传值，使用时需要注意，在使用$on的组件中需要在组件销毁时将监听也一并销毁掉，这样做一方面优化性能和内存，一方面避免了一次发布消息，多次监听的情况。

在本次的学习中，我发现一个特别好玩的情况，假设，第一次在a组件中发布消息， b组件中无法通过监听获取消息，当第二次在a组件中发布消息时，b组件可以监听到。 在这里存在疑问，成长的路上少不了大神和同行的相助，希望在评论区能留下您宝贵的足迹，不甚感激。

以下有四种使用方法可供参考

方法1：创建一个bus.js文件，使用一个空的Vue实例作为中央事件总线，最后引入到组件中

// bus.js
import Vue from 'vue';
const bus = new Vue();
export default bus;

// 组件中使用
// a组件
bus.$emit('getMessage',value)
// b组件
bus.$on('getMessage',this.showMsg)
showMessage (value) {　
　 console.log('msg', value)
}
destoryed () {
　　this.$off('getMessage', this.showMessage)
}

方法2：在全局文件main.js中，手动将事件总线bus定义在vue的原型对象上，这样全局都可以使用

// main.js
const bus = new Vue()
Vue.prototype.$bus = bus

// 组件中使用
this.$bus.on()
this.$bus.$emit()
this.$bus.$off()

方法3：使用插件vue-bus

// 安装，引入 
npm install vue-bus --save
// vue-bus自动作用于全局
import VueBus from 'vue-bus'; 
Vue.use(VueBus)

// 使用方法同方法2
// 组件中使用
this.$bus.on()
this.$bus.$emit()
this.$bus.$off()

方法4：引入封装好的EventEmitter.js

这里想要封装好的EventEmitter.js文件的，请在评论区私信偶~~

// a 组件

import EventEmitter from "@/utils/EventEmitter";
	export default{
	   created(){
		   EventEmitter.emit('loadFormData',value)
	   },
	   data(){
		   return {
			   value:1
		   }
	   }
}



// b组件

import EventEmitter from "@/utils/EventEmitter";
export default{
   created(){
		EventEmitter.on('loadFormData',this.loadFormData)
   },
   data(){
	   return{
		  fullScreenValue:'' 
	   }
   }
   methods:{
	   loadFormData(value){
		   this.fullScreenValue = value
	   }
   },
   // 监听事件需要在组件销毁时删除
	destroyed() {
		   EventEmitter.removeListener("loadFormData", this.fullScreen);
	   }
}