Vue组件通信之bus详解

作为一名frontend coder， vue也用了有年头了，最近看到相关内容时想着总结一些知识记录下来，vue最主要的两大特性就是响应式和组件化，组件化项目少不了组件之间的通讯，那么组件之间到底有几种通信方式呢。很多刚学前端使用vue的同学被问到这个时，大概知道props和emit时间提交，再或者是vuex状态管理。
其实vue组件之间通信的方式有很多种，
其实组件间通信有很多种，包括父子组件之间和兄弟之间以及子孙之间

• props&emit
• vuex state manage
• v-model
• slot-scope
• refs
• $parent & $children
• $bus
• privide和inject
• main.js
• other，ex:cookie、storage and so on

关于slot-scope和privide&inject我在之前的文章中讲过了。
今天着重讲一下另外一种事件中转bus，非常简单快捷，不需要走其他中转或者提交事件，只需要触发和监听即可，也是我之前项目中用到比较多的一种，尤其是多组件依赖某一个小的组件的数据时，比如单页面上方有个radio-group，事件触发后需要其他组件同步更新数据时， 尤为好用，
具体实现：
在main.js文件中定义一个新的bus对象并且挂载在vue原型上，其实是一个Vue实例：

Vue.prototype.$bus = new Vue()  //EventBus事件中转  add by lau

触发事件的组件：

watch:{
    
    
  radio(newVal){
    
    
    this.$bus.$emit('radioChange', newVal)
  }
}

接收事件的组件：

created() {
    
    
   // 监听radioChange
   this.$bus.$on('radioChange', res=>{
    
    
     console.log("radioChange",res)
   })
 },

这时候就拿到的变更数据，非常简单，方便快捷，尤其时多依赖，且没有做全局数据共享的业务开发中