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这个生命周期钩子执行时就会处理我从父组件传来的数据。
为了便于理解,有的术语并不准确,但意思就是这个么意思!