异步引入组件

最新推荐文章于 2024-08-21 10:23:41 发布

小吴吴吴呀

最新推荐文章于 2024-08-21 10:23:41 发布

阅读量428

点赞数 9

文章标签：前端 javascript vue.js

本文链接： https://blog.csdn.net/xiaowude_boke/article/details/137032944

版权

本文介绍了Vue中的defineAsyncComponent函数用于异步引入组件，并通过Suspense标签管理加载过程。当子组件数据量大导致延迟显示时，使用此方法可以保证父组件的即时渲染。

摘要由CSDN通过智能技术生成

defineAsyncComponent 函数：用于异步引入组件。

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

应用场景：当子组件的数据量较大，导致父组件延迟显示时使用。

语法格式

异步引入组件：

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

设置默认内容：

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

异步引入组件：

一、子组件：创建 Child 子组件。

<template>
  <div style="background-color: red;padding: 10px;">
    <h3>我是 Child 子组件</h3>
  </div>
</template>

二、父组件：通过 defineAsyncComponent 异步引入组件。

<template>
  <h3>我是父组件</h3>
  <!-- 使用异步组件 -->
  <Child></Child>
</template>

<script setup>
// 引入 defineAsyncComponent 函数
import { defineAsyncComponent } from 'vue';
// 动态引入【异步引入】
const Child = defineAsyncComponent(() => {
  return import('../components/Child');
});
</script>