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
      }
    }
Logo

前往低代码交流专区

更多推荐