Vue引入异步组件

defineAsyncComponent 函数:异步引入组件。

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

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

异步引入组件:

javascript 复制代码
import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(() => {
  return import('../components/Child.vue');
});

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

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

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

异步引入组件的作用:

创建 Child 子组件:

javascript 复制代码
<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 组件。

html 复制代码
<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 组件。

html 复制代码
<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 网络,我们会发现父组件显示出来之后,子组件才显示。

原创作者:吴小糖

创作时间:2023.10.27

相关推荐
你的电影很有趣13 小时前
lesson70:jQuery Ajax完全指南:从基础到4.0新特性及现代替代方案引言:jQuery Ajax的时代价值与演进
javascript·ajax·jquery
2503_9284115614 小时前
9.26 数据可视化
前端·javascript·信息可视化·html5
我叫唧唧波14 小时前
【打包工具】webpack基础
前端·webpack
知识分享小能手16 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
Ares-Wang18 小时前
Vue3 》》vite》》TS》》封装 axios ,Promise<T>
vue.js·typescript
PineappleCoder19 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
Min;19 小时前
cesium-kit:让 Cesium 开发像写 UI 组件一样简单
javascript·vscode·计算机视觉·3d·几何学·贴图
EveryPossible19 小时前
展示内容框
前端·javascript·css
伊织code20 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰20 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js