例子:
异步的组件
<script setup lang='ts'>
import { ref } from "vue";
const data = ref('')
const change = (time: number) => {
return new Promise<void>((resolve, reject) => {
setTimeout(() => {
resolve()
}, 2000)
setTimeout(() => {
reject()
}, time)
})
}
try {
await change(2001).then(res => {
data.value = '成功'
})
} catch (error) {
data.value = '失败'
}
</script>
<template>
<div>
<h1>{{ data }}</h1>
</div>
</template>
父组件
<script setup lang="ts">
import {defineAsyncComponent } from "vue";
// 异步组件
const AsyncCom = defineAsyncComponent(()=>import('./views/D/index.vue'))
</script>
<template>
<h1>异步组件</h1>
<Suspense>
<template #default>
<AsyncCom>
</AsyncCom>
</template>
<template #fallback>
<div>loading...</div>
</template>
</Suspense>
</template>
父组件通过defineAsyncComponent这个API
动态引入子组件并包裹在Suspense的default插槽中
同时在插槽fallback中指定子组件异步任务加载时的加载状态。
子组件中通过promise和定时器模拟异步任务,当异步任务进行时,显示子组件内容
当异步任务结束显示内容