分类
- 父子组件通信:
props
;$parent
/$children
;provide
/inject
;ref
;$attrs
/$listeners
- 兄弟组件通信:
eventBus
; vuex - 跨级通信:
eventBus
;Vuex;provide
/inject
、$attrs
/$listeners
Vue的通信方式根据使用场景可以分为以下几类:
- 父子组件通信
- 兄弟组件通信
- 跨组件通信
父子组件通信
props
/$emit
- 父组件通过
props
向子组件内进行值传递; - 子组件通过向父组件触发
$emit
事件进行传递;
- 父组件通过
eventBus
通过Vue
创建一个空的实例进行事件的传递1
2
3
4
5var eventBus = new Vue();
// 触发事件
eventBus.$emit('eventName', {});
//事件接收者
eventBus.$on('eventName', data => console.log(data));$parent
/$children
$parent
: 组件中可以使用$parent
获取到父对象来进行通信;$root
节点的$parent
对象 为undefined
, 可以通过$root
来获取根节点。 通过$parent
获取到的对象为 Vue对象。$children
: 可以使用组件的$children
来进行通信,获取到的对象是 数组 类型,所以需要用 索引 来获取组件
ref
通过设置$ref
来获取组件对象;$ref 增加到 $dom元素上,获取的就是$dom元素;增加到组件上,获取的就是组件对象。
兄弟组件通信
eventBus
Vuex
跨组件通信
evnetBus
Vuex
provide
/inject
允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。这两个必须匹配使用。默认的数据不是响应式的,也就是说更改属性后不会同步更新,需要手动实现响应式数据绑定。1
2
3
4
5export default {
provide: {
videoName: 'test.mp4'
}
}1
2
3
4
5
6export default {
inject: ['videoName'],
mounted () {
console.log(this.videoName); // test.mp4
}
}
$attrs
/$listeners
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 惆怅客!
评论