Vue引入异步组件

简介: Vue引入异步组件

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

 


相关文章
|
16小时前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
52 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
20 2
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
10 3
|
3天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
13 2
|
3天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
10 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
11 2