Vue中央事件总线$bus跨父子组件无限层级通信（解决$bus.emit 第一次不触发、通信传值数据监听等）

使用场景：

多种类跨组件全局搜索实现，vuex对于当前场景过于繁琐庞杂，由此想用vue中央事件总线bus去处理。

使用问题：

一、第一次无法传值：因为$emit先于$on执行了，所以接受传值的组件无法获得第一次数据；
二、传值数据监听：因为不是props数据传输，所以需要监听data的数据

解决办法：

• main.js

//中央事件总线
Vue.prototype.$bus=new Vue();

• 传值组件

onSearch(value) {
	this.Sdata.svalue=value;
	// 加定时器，防止$emit先于$on执行了，否则无法获得第一次数据；
	setTimeout(() => {
	  this.$bus.$emit('Search', this.Sdata.svalue);
	});
	if (this.Sdata.category=='课程') {
	  this.$router.push('/curriculumList/index');
	} else if(this.Sdata.category=='专题'){
	  this.$router.push('/specialList/index');
	} else if(this.Sdata.category=='新闻'){
	  this.$router.push('/newsList/index');
	}
},

• 接收值组件

// 中央事件总线数据接收
  created () {
    let that=this;
    this.$bus.$off('Search').$on('Search',data=>{
      console.log('搜索数据接收',data)；
      //降接收的值赋值到data
      that.Cquery.title=data;
    });
  },
  //对获取到的中央事件传值数据声明
  computed: {
    Cquery(){
      return this.Cquery.title
    },
  },
  //对中央事件赋值data数据深度监听并执行对应要执行的方法
  watch: {
    Cquery:{
      handler(val){
        console.log('jt',val)
        this.CourseList();;
      },
      deep:true
    }
  },

至此我们就完成了一个最基础的vue中央事件总线的赋值传值操作，轻量化的实现部分vuex的功能，很多时候项目没有那么多状态，是完全用不到vuex，所以vue中央事件总线是一个很好的、轻量化的、无线跨组件的通信方案。

如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；