Suspense 的使用

Suspense 的使用

Suspense 的使用

• Suspense是一个内置的全局组件，该组件有两个插槽

1. default : 如果default可以显示，那么显示的是default的内容
2. fallback ：如果default无法显示，那么会显示fallback插槽的内容

示例

<template>
  <div>
    <suspense>
      <template #default>
        <Ansyc></Ansyc>
      </template>
      <template #fallback>
        <loding></loding>
      </template>
    </suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
import loding from "./views/loding.vue";
import error from "./views/loding.vue";

const Ansyc = defineAsyncComponent(() => import("./views/one.vue"));
export default {
  components: { Ansyc, loding, error },
};
</script>