1. 问题描述
在子组件定义了srcList
props:{
width:Number,
height:Number,
name:String,
size:String,
srcList:Array,
multiple:Boolean
},
父组件传进去一个数组
<FormItem label="上传商品图" class="ivu-form-item-required">
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :srcList="this.productImage"></uploadImg>
</FormItem>
这个数组在父组件是可以打印出来的,传入子组件中,子组件打印不出来,但是其他props都可以打印出来,请问是什么原因呢?
原因是:父组件中定义的这个数组默认为空,值是在created钩子函数中axios获取到的,所以传入子组件的是data里定义的空数组。
解决:子组件用watch监听里一下,输出的当前的值是数组,之前的值是空,但是组件中用到的该变量依然打印为空。此时可将把要执行的方法也放入watch 中。
computed: {
changeData() {
const {columName,columData} = this
return {
columName,
columData
}
}
},
watch: {
changeData: {
handler: function (newval, oldval) {
this.columName = newval.columName;
this.columData = newval.columData;
let length = this.columName.length;
let end = 500/length-1; // 横坐标展示5类
let show = false;
if(length >5){
show = true;
}
this.buildChart(this.columName,this.columData,show,end);
},
deep: true
}
}