Vue引入异步组件

news2024/11/15 13:55:11

defineAsyncComponent 函数：异步引入组件。

Suspense 标签：异步引入组件时，显示默认的内容。

异步引入组件的基本使用：

异步引入组件：

import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(() => {
  return import('../components/Child.vue');
});

设置组件默认显示的内容：

<Suspense>
  <!-- 如果组件加载成功，就显示 default 中的内容 -->
  <template v-slot:default>
    <Child></Child>
  </template>
  <!-- 如果组件正在加载中，就显示 fallback 中的内容 -->
  <template v-slot:fallback>
    <h3>加载中，请稍等...</h3>
  </template>
</Suspense>

注：Suspense 标签中有两个插槽 default 和 fallback，插槽名是固定的，不能随意更改。

异步引入组件的作用：

创建 Child 子组件：

<template>
    <div class="child">
        <h3>我是Child组件（子组件）</h3>
    </div>
</template>

<script>
export default {
    name: "Child"
}
</script>
<style scoped>
.child {
    background-color: red;
    padding: 10px;
}
</style>

创建 Parent 父组件：通过静态引入的方式使用 Child 组件。

<template>
  <div class="parent">
    <h3>我是Parent组件（父组件）</h3>
    <Child></Child>
  </div>
</template>

<script>
// 静态引入【同步引入】
import Child from '../components/Child';
export default {
  name: "Parent",
  components: { Child }
}
</script>

<style scoped>
.parent {
  background-color: aqua;
  padding: 10px;
}
</style>

注：在控制台的 Network 中，将网络调成 Slow 3G（慢的 3G 网络）。刷新页面后，我们会发现父组件和子组件是一起显示的。

注：假如子组件中的数据量特别大，那么静态引入时，也会导致父组件延迟显示。

修改 Parent 父组件：通过异步引入的方式使用 Child 组件。

<template>
  <div class="parent">
    <h3>我是Parent组件（父组件）</h3>
    <Child></Child>
  </div>
</template>

<script>
// 引入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue';
// 动态引入【异步引入】
const Child = defineAsyncComponent(() => {
  return import('../components/Child.vue');
});
export default {
  name: "Parent",
  components: { Child }
}
</script>

<style scoped>
.parent {
  background-color: aqua;
  padding: 10px;
}
</style>

注：同样调成 Slow 3G 网络，我们会发现父组件显示出来之后，子组件才显示。