Vue3的新组件＜Suspense＞

时间：2024-04-27 14:35:16

在 Vue 3 中，你可以使用 <Suspense> 组件来包裹异步组件，从而提供一个更好的用户体验，包括在组件加载时的占位符和加载失败时的错误提示。<Suspense> 是 Vue 3 提供的一个新特性，允许你指定加载异步组件时的默认内容和错误状态。

以下是一个如何在 Vue 3 中使用 <Suspense> 来设置异步组件的示例： 

首先，定义一个异步组件： 

// AsyncComponent.vue  
<template>  
  <div>  
    <h1>Async Component Loaded</h1>  
    <!-- 其他组件内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  // 组件选项...  
}  
</script>

然后，在父组件中使用 <Suspense> 来包裹这个异步组件，并定义加载中和加载失败时的状态： 

<template>  
  <div>  
    <h1>Parent Component</h1>  
    <Suspense>  
      <template #default>  
        <AsyncComponent />  
      </template>  
      <template #fallback>  
        <div>Loading...</div>  
      </template>  
      <template #error>  
        <div>Failed to load the component</div>  
      </template>  
    </Suspense>  
  </div>  
</template>  
  
<script>  
import { defineAsyncComponent } from 'vue';  
  
const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));  
  
export default {  
  components: {  
    AsyncComponent  
  }  
}  
</script>

 在这个例子中，<Suspense> 组件有三个插槽：

  • #default：这是将要被异步加载的组件的插槽。
  • #fallback：当异步组件正在加载时显示的插槽内容。
  • #error：当异步组件加载失败时显示的插槽内容。

当 AsyncComponent 组件正在加载时，用户会看到 #fallback 插槽中的内容（这里是“Loading...”文本）。如果组件加载成功，那么它将替换 #fallback 插槽的内容。如果组件加载失败，则会显示 #error 插槽的内容（这里是“Failed to load the component”文本）。

<Suspense> 组件使得处理异步组件的加载和错误状态变得更加简单和直观，为用户提供了一个更加平滑的体验。

 

相关文章