Vue3异步组件和Suspense
发表于:2024-06-23 18:26:56浏览:102次
注意:目前(2022-08-01)Suspense显示的是一个实验性的特性,API随时可能会修改
Suspense是一个内置的全局组件,该组件有两个插:
- default:如果default可以显示,那么显示default的内容;
- fallback:如果default无法显示,那么会显示falback插槽的内容:
代码示例
// asyncHome.vue
<template>
<div class="home">
<h2>home</h2>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
</style>
fallback是应急的意思,所以在没有加载完成的时候会显示这个页面
// App.vue
<template>
<div class="app">
<suspense>
<template #default>
<async-home></async-home>
</template>
<template #fallback>
<h2>Loading</h2>
</template>
</suspense>
</div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"))
</script>
<style scoped>
</style>
感谢大家观看,我们下次见