web0715/15.vue3/project2/src/Suspense/Home.vue

<template>
  <div class="home">
    <h1>首页</h1>
    <img
      src="https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg"
      alt=""
    />

    <Suspense>
      <!-- 具有深层异步依赖的组件 -->
      <Child />
      <!-- 在 #fallback 插槽中显示 “正在加载中” -->
      <template #fallback> Loading... </template>
    </Suspense>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Child from "../Suspense/Child.vue";
</script>
<style lang="scss" scoped>
.home {
  width: 500px;
  height: 500px;
  background: yellow;
  img {
    width: 300px;
    height: 300px;
  }
}
</style>