通过defineAsyncComponent引入组件,使用Suspense渲染
Suspense有两个插槽,一个default一个fallback
<template>
<Suspense>
<template #default>
<userCard></userCard>
</template>
<template #fallback>
加载中loading。。。
</template>
</Suspense>
</template>
<script setup lang="ts">
import {defineAsyncComponent} from 'vue';
const userCard = defineAsyncComponent(()=>import('@/components/user.vue'))
</script>
子组件user.vue
<template>
<div>
<div>姓名:{{ data.name }}</div>
<div>年龄:{{ data.age }}</div>
<div>描述:{{ data.info }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { axios } from '../server/axios';
interface Data {
data: {
name: string,
age: number,
info: string
}
}
const { data } = reactive(await axios.get<Data>('./data.json'));
</script>