vue 父组件给子组件传数组 打印无数据问题解决方法

<!-- v-if="flag" -->
<comileCopy
  
  ref="test"
  :listArray.sync="form.service_company_promo_pic"
></comileCopy>

1. 在父组件定义一个 flag，当数据获得的之后再进行子组件的渲染
   测试直接判断数组效果不佳

2. 父组件直接调用子组件定义数据

this.form.service_company_promo_pic.forEach((item,index)=>{
  this.$refs.test.form.service_company_promo.push(item)
})

3. 通过 ref 属性，父组件调用子组件的方法，把要传的数组作为参数传给子组件，子组件获取该参数，并使用

this.$refs.test.getSrcList(this.form.service_company_promo_pic); 

getSrcList(v) {
  v.forEach(item => {
    console.log(item);
    this.form.service_company_promo.push(item);
  });
}

4. 子组件使用 $parent 获取父组件数据

mounted() {
  console.log(this.$parent.$parent.form);
},

参考：
vue 中父组件向子组件传值问题，
vue 父组件向子组件动态传值的两种方法 第一种方法测试无效

转载于:https://www.jianshu.com/p/ce02d887bc04