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)
})
  1. 通过 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);
  });
}
  1. 子组件使用 $parent 获取父组件数据
mounted() {
  console.log(this.$parent.$parent.form);
},

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,471评论 0 29
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,063评论 0 25
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,937评论 0 32
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 7,699评论 1 17
  • 有多少一直不敢表白的人借着愚人节说出那些情话 01 我喜欢你!嗯?嗯!啊哈,今天愚人节?对啊,哈哈,差点被骗了吧!...
    学长talk阅读 3,875评论 0 3