使用场景：
多种类跨组件全局搜索实现，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中央事件总线是一个很好的、轻量化的、无线跨组件的通信方案。
如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；