Vue3：Suspense

等待异步组件时渲染一些额外的内容,让应用有更好的用户体验

<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。

 

<template>
  <div class="fa">
    <h1>父组件HomeView</h1>

    <!-- <Helloworld></Helloworld> -->
    <suspense>
      <template #default>
        <MyChild></MyChild>
      </template>
      <template #fallback>
        <div>
          <h1> 正在加载中Loading...</h1>
        </div>
      </template>
    </suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue"
// import Helloworld from "../components/HelloWorld.vue"  //静态引用

let MyChild = defineAsyncComponent(() => import("../components/HelloWorld.vue")) //异步引入

</script>

<style lang="scss" scoped>
.fa {
  height: 300px;
  background-color: #ccc;
}
</style>