vue父组件特定时期将数据传给子组件，不是一加载就给

vue父组件从服务器请求到数据后，再将数据给子组件。并不是一上来就有数据，并给子组件，而是父组件拿到数据后传给子组件，然后子组件再处理这些数据！

最简单的两种方式：

方式一：

这种方式就很普通，也没啥技巧，就给子组件加一个ref，然后通过$ref调用就完事了。原理呢也就是那个原理！

子组件：

<script>
export default {
  name: "upload-pdfs-images",
  data() {
    return {
      images: [],
      pdfs: [],
    }
  },
  methods: {
    _dealWithPdfsImagesEvt(urls){
      for (let i in urls) {
        if (urls[i] == null || urls[i].file_url === undefined 
            || urls[i].file_url === '' || urls[i].file_url.length === 0) {
          continue;
        }
        if (urls[i].file_url.substring(urls[i].file_url.lastIndexOf('.'))
            .toLowerCase() === '.pdf') {
          this.pdfs.push(urls[i]);
        } else {
          this.images.push(urls[i]);
        }
      }
    }
  }

}
</script>

父组件：

<template>
  <div>
    <el-card class="form-container" shadow="never">
        <upload-pdfs-images ref="uploadPdfsImages" 
            @handleImagesOrPdfsEvt="handleImagesOrPdfsEvt"  />
    </el-card>
  </div>
</template>

<script>
import {findById} from '@/api/cleanSterilize'
import uploadPdfsImages from "@/components/uploadPdfsAndImages/upload-pdfs-images"

export default {
  name: 'dataDetail',
  components: {uploadPdfsImages},
  data() {
    return {
      dataObj: {
        id: '',
        sterilize_date: '',
        sterilize_num: 0,
        remark: '',
        file_urls: [],
        user_arr: []
      },
    }
  },
  created() {
    if (this.isEdit) {
      findById({id: this.$route.query.id}).then(res => {
        this.dataObj = res.data;
        this.$refs.uploadPdfsImages._dealWithPdfsImagesEvt(res.data.file_urls);
      });
    }
  },
}
</script>

方式二：

这种方式就有个很巧妙的地方

子组件：

<script>
export default {
  name: "upload-pdfs-images",
  props: {
    fileUrls: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      images: [],
      pdfs: [],
    }
  },
  created() {
    let urls = this.fileUrls
    for (let i in urls) {
      if (urls[i] == null || urls[i].file_url === undefined 
            || urls[i].file_url === '' || urls[i].file_url.length === 0) {
        continue;
      }
      if (urls[i].file_url.substring(urls[i].file_url.lastIndexOf('.'))
            .toLowerCase() === '.pdf') {
        this.pdfs.push(urls[i]);
      } else {
        this.images.push(urls[i]);
      }
    }
  }

}
</script>

父组件：

<template>
  <div>
    <el-card class="form-container" shadow="never">
        <upload-pdfs-images :file-urls="dataObj.file_urls" 
            v-if="updateModel" @handleImagesOrPdfsEvt="handleImagesOrPdfsEvt" />
    </el-card>
  </div>
</template>

<script>
import {findById} from '@/api/cleanSterilize'
import uploadPdfsImages from "@/components/uploadPdfsAndImages/upload-pdfs-images"

export default {
  name: 'dataDetail',
  components: {uploadPdfsImages},
  data() {
    return {
      dataObj: {
        id: '',
        sterilize_date: '',
        sterilize_num: 0,
        remark: '',
        file_urls: [],
        user_arr: []
      },
      updateModel: false
    }
  },
  created() {
    this.getUserList();

    if (this.isEdit) {
      findById({id: this.$route.query.id}).then(res => {
        this.dataObj = res.data;
        this.updateModel = true;
      });
    }
  }
}
</script>

方式二最巧妙的地方就在于 updateModel 这个属性！！！

一上来，我通过该属性值来决定我是否解析渲染子组件，因为该属性初始值为false，所以并不渲染子组件。当我从服务器请求到数据后，把该属性值改为true！

vue中当某个属性值改变后，就会重写解析模板，完成DOM更新！这个时候v-if为真，就会进行子组件渲染，而我要传递给子组件的数据也已经有了，因此created这个生命周期钩子执行时就会处理我从父组件传来的数据。

为了便于理解，有的术语并不准确，但意思就是这个么意思！