1. 父传子
在父页面中,调用子页面的组件位置处,通过“:”进行参数传递
<child-component :childData="parentData"></child-component>
parentData对象,需要在父页面的data中进行初始化声明
在子页面中,需要在props中,承接该对象
props: {
childData: {
type: Array,
default: () => [],
},
}
然后在子页面中,可以通过this.childData
使用父页面传递过来的数据
注意:在子页面中props中声明的对象,在data中不要重复声明了,否则就会报错,如果需要在组件内部使用或者修改父页面传值,应该在data中使用赋值,例如
data() {
return {
myChildData:this.childData
}
}
2. 子传父
子页面没有办法直接给父页面的参数赋值,子页面向父页面传值的方式为调用父页面的函数,将需要传递的数据放到父页面函数的参数中
子页面添加方法:
methods: {
//向父页面传数据 $emit向父页面传数据的方法
childToFather: function() {
const vm = this;
vm.$emit('getChildData', this.data);
},
}
父页面添加方法:
methods: {
//向父页面传数据 $emit向父页面传数据的方法
getChildData: function(data) {
this.fatherData = data//用子页面的数据,修改父页面的数据
},
}
3. A子传B子
假设父页面F有两个子页面的组件A和B,A和B之间需要相互传参,假设A要给B传递数据,那个区分两个过程,分别取名:AToF和FToB。
其中,AToF,使用子页面通过$emit
方法,将A的值给父页面传递过去,然后在FToB的过程中,通过props属性中的对应值,将数据传给B页面。