【Vue3】内置组件Suspense的使用

现有父子组件如下:

父组件

<template>
  <div class="father">
    <h3>父组件</h3>
    <Son />
  </div>
</template>

<script setup lang="ts">
import Son from "./Son.vue"
</script>

<style scoped>
.father {
  width: 400px;
  height: 400px;
  background-color: #bfd6ff;
}
</style>

子组件:组件顶层带有await表达式

<template>
  <div class="son">
    <h4>子组件</h4>
  </div>
</template>

<script setup lang="ts">
import axios from "axios"

await axios("https://api.uomg.com/api/rand.qinghua?format=json")
</script>

<style scoped>
.son {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
</style>

使用

与React中的Suspense类似,但是目前仍为实验性功能:
在这里插入图片描述

在这里插入图片描述

由于子组件中出现上图中情况1:await表达式。所以父组件中无法正确展示子组件,需要使用Suspense内置组件,将未成功渲染的子组件包裹即可。

<Suspense>
  <Son />
</Suspense>

但通过控制台将网速变为3G后可以明显发现,在接口完成之前,有一段时间子组件内容区域为空白。

在这里插入图片描述

可以在接口数据返回前,展示另一种结构优化体验。

由于底层使用插槽实现,所以在Suspense下加入template且插槽名为fallback

<Suspense>
  <Son />
  <template #fallback>
    <p>加载中...</p>
  </template>
</Suspense>

在这里插入图片描述

父组件

<template>
  <div class="father">
    <h3>父组件</h3>
    <Suspense>
      <Son />
      <template #fallback>
        <p>加载中...</p>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import Son from "./Son.vue"
</script>

<style scoped>
.father {
  width: 400px;
  height: 400px;
  background-color: #bfd6ff;
}
</style>
  • 8
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3中,可以通过使用suspense组件来搭配路由使用suspenseVue3中内置的一个组件,它允许我们在等待异步组件加载时渲染一些后备的内容,从而创建一个平滑的用户体验。在搭配路由使用时,我们可以在router-view组件上添加suspense,并使用v-slot指令来获取异步组件的实例。 以下是一个官方代码示例,展示了如何在Vue3中使用suspense搭配路由: ```html <router-view v-slot="{ Component }"> <template v-if="Component"> <transition mode="out-in"> <keep-alive> <suspense> <component :is="Component"></component> <template #fallback> <div>Loading...</div> </template> </suspense> </keep-alive> </transition> </template> </router-view> ``` 在上述代码中,我们使用了v-slot指令来获取异步组件的实例,并将其命名为Component。然后,我们使用Component来动态地渲染组件。在组件加载期间,如果需要等待异步组件加载完成,我们可以在suspense组件内部添加一个后备内容,例如显示"Loading..."的提示信息。 通过这种方式,我们可以实现在Vue3中使用suspense搭配路由,以提升用户体验并避免组件加载时的延迟。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue3 router-view keep-alive Suspense transition 共同使用](https://blog.csdn.net/qq_36287830/article/details/126020218)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3.0的新特性(8)Suspense](https://blog.csdn.net/weixin_43365995/article/details/123386594)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值