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)
   })
 },

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

你可能感兴趣的:(vue,vue.js,javascript,前端)