Vue组件通信之bus详解
vue最主要的两大特性就是响应式和组件化,组件化项目少不了组件之间的通讯,那么组件之间到底有几种通信方式呢。今天着重讲一下另外一种事件中转bus,非常简单快捷,不需要走其他中转或者提交事件,只需要触发和监听即可,也是我之前项目中用到比较多的一种,尤其是多组件依赖某一个小的组件的数据时,比如单页面上方有个radio-group,事件触发后需要其他组件同步更新数据时, 尤为好用,
·
作为一名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)
})
},
这时候就拿到的变更数据,非常简单,方便快捷,尤其时多依赖,且没有做全局数据共享的业务开发中
更多推荐
已为社区贡献15条内容
所有评论(0)