VUE组件之间数据传递
父子组件之间传递
父 -> 子
(props)属性值方式
- 父组件关键代码:
1
2
3<template>
<Child :child-msg="msg"></Child>
</template>
子组件关键代码:
1
2
3
4
5
6export default {
name: 'child',
props: {
child-msg: String //这里指定了字符串类型,如果类型不一致会警
}
};
child-msg
为父组件给子组件设置的额外属性值,属性值需在子组件中设置props
,子组件中可直接使用child-msg
变量。
子组件调用父组建
子组件通过 $parent
获得父组件,通过 $root
获得最上层的组件。
provider/inject
简单的来说,就是在父组件中通过provider
提供变量,在子组件中通过inject
来注入组件。不论(子组件有多深,只要调用了inject
那么就可以注入provider
中的数据。而不是局限于只能从当前父组件的prop
属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
实例:
1 | // 父级组件提供 'foo' |
子 -> 父
发送/监听事件
子组件某函数中发送事件:
1
this.$emit('eventName','data')
父组件中监听子组件事件:
1
<Child @eventName='todo()'></Child>
eventName
为子组件自定义发送事件名称todo()
为父组件处理方法data
为子组件向父组建传递的参数
父组件直接获取子组建属性和方法
给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。
1 | <!-- ref的值是组件引用的名称 --> |
父组件中通过$refs
组件名来获得子组件,也就可以调用子组件的属性和方法了。
1 | let child = this.$refs.name |
父组件通过 $children
可以获得所有直接子组件(父组件的子组件的子组件不是直接子组件)。需要注意 $children
并不保证顺序,也不是响应式的。
非父子组件
eventBus
目前eventBus
通行方式是解决兄弟组件之间通信的最佳方式。使用方法:
定义一个新的vue实例
1
2
3//eventBus.js
import Vue from 'vue'
export default new Vue();
发送事件(发送数据)
1
2
3
4import bus from '@/bus';
//方法内执行下面动作
bus.$emit('childa-message', this.data);组件内监听(接收数据组件)
1
2
3
4
5
6import bus from '@/bus';
//方法内执行下面动作
bus.$on('childa-message', function(data) {
console.log('I get it');
});
vuex方式传值
如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候才有上面这一些方法可能不利于项目的维护,vuex的做法就是将这一些公共的数据抽离出来,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。