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

效果：

6s执行项图片缩略图

子组件：

bash 复制代码

<!-- 6s执行项详情图片的子组件 -->
<template>
  <div>
    <img
      v-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>

父组件：

bash 复制代码

<!-- 6s执行项详情图片的父组件 -->
<template>
  <!-- 执行项的des显示 -->
  <splitter title="执行项" />
  <el-descriptions
    class="box1"
    v-if="itemsData.length > 0"
    style="width: 50%; float: left"
    :column="1"
    border
  >
    <el-descriptions-item
      v-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-icon
          v-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-descriptions
    v-if="ExecutionItemDataOne.length > 0"
    style="width: 50%; float: left"
    :column="1"
    border
  >
    <el-descriptions-item
      v-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">
        <li
          class="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-empty
    v-else
    description="该方案暂未绑定执行项"
    :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和mapID
      if (newVal.length > 0) {
        newVal.forEach((item: any) => {
          let data = {
            mapDicID: res.data[0].id, //地图释义ID
            linkID: item.iD_Item, //外部关联ID
          };
          demoArr.value.push(data);
        });
        console.log("demoArr.value", demoArr.value);
      }
      // 按顺序获取linkID和mapID
      let test = [];
      for (let j = 0; j < demoArr.value.length; j++) {
        let result = searchFileMap(
          JSON.parse(JSON.stringify(demoArr.value[j]))
        );
        test.push(result);
      }
      // 按顺序获取文件id
      Promise.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>

ccc感谢某大佬！！！！我tmd还在找循环的问题，毫不核心的问题。大佬的解决思路就是清奇！！思路清晰！！