VUE3-异步组件的使用（21）

文章目录

• • 父组件App.vue
  • 子组件ChildComponent.vue
  • 结果展示

父组件App.vue

<template>
  <div>
    <h1>这是父组件</h1>

    <!-- 用suspense包裹异步组件 -->
    <suspense>

      <!-- 组件显示正常时加载 -->
      <template v-slot:default>
        <ChildComponent></ChildComponent>
      </template>

      <!-- 组件显示缓慢时加载 -->
      <template v-slot:fallback>
        <h1>稍等，加载中...</h1>
      </template>

    </suspense>

  </div>
</template>

<script>
// 静态引入
// import ChildComponent from "@/components/ChildComponent";

// 动态引入（异步引入）
import {defineAsyncComponent} from "vue";
const ChildComponent = defineAsyncComponent(() => import('./components/ChildComponent'))

export default {
  name: 'App',
  components: {ChildComponent}
}
</script>

<style>
div {
  background-color: gray;
  padding: 10px;
}
</style>

子组件ChildComponent.vue

<!-- 此组件保证自身在3秒后才会被成功加载 -->
<template>
  <div>
    <h1>这是子组件</h1>
    <h3>数据：{{ num }}</h3>
  </div>
</template>

<script>
import {ref} from "vue";

export default {
  name: "ChildComponent",
  async setup() { // setup函数可以是async函数，函数的返回可以是一个Promise实例，但需要父组件使用suspense和异步组件的引入

    let num = ref(0)

    const p = new Promise(resolve => {
      // 设置三秒后调用resolve
      setTimeout(() => {
        resolve({num})
      }, 3000)
    })

    const x = await p
    console.log(x) // {num: RefImpl}

    return x // 3秒后await获取Promise对象成功的值，最后返回
  }
}
</script>

<style scoped>
div {
  background-color: skyblue;
  padding: 10px;
}
</style>

结果展示