子组件和父组件之间传值#Vue3#defineProps

效果：
在这里插入图片描述

子组件：

<!-- 6s执行项详情图片的子组件 -->
<template><div><imgv-if="itemsLocal.url":src="itemsLocal.url"style="width: 50px; height: 50px; margin: 2px"/><el-link type="primary" v-else>{{itemsLocal.name + itemsLocal.suffix}}</el-link></div>
</template><script setup lang="ts">
import { ref, onMounted } from "vue";
import { DownFile } from "@/api/sixData/index";const props = defineProps(["info"]);//用来接收父组件的值
const itemsLocal = ref({});
onMounted(() => {itemsLocal.value = { ...props.info };getUrl(props.info);
});//文件下载
async function getUrl({ fileID: id, name, suffix }) {const blob1 = await DownFile({ id });let imageUrl = "";if ([".jpg", ".jpeg", ".png"].includes(suffix)) {imageUrl = (window.URL || window.webkitURL).createObjectURL(blob1);itemsLocal.value.url = imageUrl;itemsLocal.value = JSON.parse(JSON.stringify(itemsLocal.value));}
}
</script>
<style scoped lang="scss"></style>

父组件：

<!-- 6s执行项详情图片的父组件 -->
<template><!-- 执行项的des显示 --><splitter title="执行项" /><el-descriptionsclass="box1"v-if="itemsData.length > 0"style="width: 50%; float: left":column="1"border><el-descriptions-itemv-for="(item, index) in itemsData":key="index"align="center"label-class-name="my-label"class-name="my-content":span="1":label="`执行项${index + 1}`"><section class="flex items-center justify-between"><span>{{ item.content }}</span><svg-iconv-if="item.state == 1"class-name="text-green-700 text-4xl"icon-class="pass"/><svg-icon v-else class-name="text-red-700 text-4xl" icon-class="fail" /></section></el-descriptions-item></el-descriptions><!-- 执行项的显示图片 --><el-descriptionsv-if="ExecutionItemDataOne.length > 0"style="width: 50%; float: left":column="1"border><el-descriptions-itemv-for="(item, index) in ExecutionItemDataOne":key="index"label-class-name="my-label"class-name="my-content":span="1"align="center":label="`标准图片${index + 1}`"><ul class="cell-link"><liclass="truncate"v-for="(items, indexx) in item":key="indexx"@click="handlePreview(items)"><imageC :info="items" /><!-- <el-link type="primary" v-else>{{ items.name + items.suffix }}</el-link> --></li></ul></el-descriptions-item></el-descriptions><el-emptyv-elsedescription="该方案暂未绑定执行项":image-size="60"></el-empty>
</template><script setup lang="ts">
import saveAs from "file-saver";
import { ref, onMounted, watch } from "vue";
import { searchMapDic, searchFileMap,DownFile } from "@/api/sixData/index";
import imageC from "./imageC.vue";//导入子组件// 判断是否是图片
const imgValue = ref({show: false,row: [],type: "",
}) as any;
const imgVideoType = reactive({imgType: [".jpg", ".jpeg", ".png"],
});const ExecutionItemDataOne = ref([]) as any; //执行项附件
const demoArr = ref([]) as any;// 监听执行项
watch(() => props.itemsData,(newVal: any) => {console.log("执行项newVal", newVal);searchMapDic({linkTable: "AttachmentExecutionItem", //外部关联表/处理的地图释义详情linkType: "", //同表标识remark: "", //备注}).then((res: any) => {// 获取linkID和mapIDif (newVal.length > 0) {newVal.forEach((item: any) => {let data = {mapDicID: res.data[0].id, //地图释义IDlinkID: item.iD_Item, //外部关联ID};demoArr.value.push(data);});console.log("demoArr.value", demoArr.value);}// 按顺序获取linkID和mapIDlet test = [];for (let j = 0; j < demoArr.value.length; j++) {let result = searchFileMap(JSON.parse(JSON.stringify(demoArr.value[j])));test.push(result);}// 按顺序获取文件idPromise.all(test).then((itemList: any) => {console.log("itemList", itemList);itemList.forEach((val: any) => {console.log("文件id", val.data);// val.data.forEach(async e1 => {//   e1.url = await getUrl(e1)// })//  setTimeout(() => {ExecutionItemDataOne.value.push(val.data);// }, 10000)});});});}
);// const handleLoad = () => {};
// const getImage = async (items: any) => {
//   const imageUrl = await getUrl(items);
//   const htmlValue = `<img :src="${imageUrl}" alt="" style="width: 100px; height: 100px;">`;
//   return htmlValue;
// };
//文件下载
// async function getUrl({ fileID: id, name, suffix }: any) {
//   const blob = await DownFile({ id });
//   console.log("blob", blob);
//   let imageUrl = "";
//   if (imgVideoType.imgType.includes(suffix)) {
//     imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
//     console.log(imageUrl, "imageUrl1");
//     return imageUrl;
//   } else {
//     return imageUrl;
//   }
// }
//文件下载
async function handlePreview({ fileID: id, name, suffix }: any) {console.log("id", id);const blob = await DownFile({ id });console.log("blob", blob);if (imgVideoType.imgType.includes(suffix)) {const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);imgValue.value.type = "img";imgValue.value.row = [imageUrl];imgValue.value.show = true;console.log("imageUrl", imageUrl);} else {saveAs(blob as unknown as Blob, name + suffix);}
}
</script>
<style scoped lang="scss">
.cell-link {display: flex;margin-left: 10px;.el-link {float: left;margin-left: 5px;}.el-image {float: left;margin-left: 5px;}
}:deep(.my-label) {height: 115px;width: 95px;
}
:deep(.my-content) {height: 100px;
}.cell-link {max-width: 265px;.el-link {display: inline;}:deep(.el-link__inner) {display: inline;}
}
</style>