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

 

原创作者:吴小糖

创作时间:2023.10.27

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120490.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

没有电脑也不用担心,在Android设备上也可以轻松使用ppt

PowerPoint是制作幻灯片的好工具&#xff0c;无论是工作、学校还是个人使用。但有时你无法使用电脑或笔记本电脑&#xff0c;你必须在旅途中做演示。 这就是PowerPoint for Android派上用场的地方。它允许你在移动设备上创建、编辑和呈现幻灯片。以下是要遵循的步骤&#xff1…

【单例模式】饿汉式,懒汉式?JAVA如何实现单例?线程安全吗?

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ 单例设计模式 Java单例设计模式 Java单例设计模…

031-从零搭建微服务-监控中心(一)

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff08;后端&#xff09;&#xff1a;mingyue: &#x1f389; 基于 Spring Boot、Spring Cloud & Alibaba 的分布式微服务架构基础服务中心 源…

KMS在腾讯云的微服务实践助力其降本50%

背景介绍 KMS 是一家日本的游戏公司&#xff0c;主要经营游戏业务、数字漫画业务、广告业务、云解决方案业务等&#xff0c;出品了多款在日本畅销的漫画风游戏&#xff0c;同时有网络漫画专业厂牌&#xff0c;以内容创作为目标&#xff0c;拥有原创 IP 创作、游戏开发等多元化发…

第三篇:实践篇 《使用Assembler 实现图片任意切割功能》

实现原理&#xff1a; 共用一个texture、material、渲染状态等。紧通过修改vertex、uvs、indexes数据即可实现任意切割功能。 一、线段分割多边形&#xff0c;并分散多边形 线段分割多边形 已知多边形points&#xff0c;线段sp、ep。线段分割多边形得到两个多边形。 publi…

竞赛选题 深度学习人体跌倒检测 -yolo 机器视觉 opencv python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的人体跌倒检测算法研究与实现 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f947;学长这里给一个题目综合评分(每项满…

oracle,CLOB转XML内存不足,ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE“,

通过kettle采集数据时&#xff0c;表输入的组件&#xff0c;查询报错。 ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE”, line 272 ORA-06512: at line 1 通过 ALTER SESSION SET EVENTS ‘31156 trace name context forever, level 0x400’; 修改会话配置 或直接修改…

网络协议--广播和多播

12.1 引言 在第1章中我们提到有三种IP地址&#xff1a;单播地址、广播地址和多播地址。本章将更详细地介绍广播和多播。 广播和多播仅应用于UDP&#xff0c;它们对需将报文同时传往多个接收者的应用来说十分重要。TCP是一个面向连接的协议&#xff0c;它意味着分别运行于两主…

安卓开发实例:方向传感器

调用手机的方向传感器&#xff0c;X轴&#xff0c;Y轴&#xff0c;Z轴的数值 activity_sensor.xml <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http://schemas.android.c…

结构伪类选择器

伪类选择器&#xff1a;用来描述一个元素的特殊状态&#xff01;比如第一个元素、某个元素的子元素、鼠标点击的元素 1 first-child/last-child /*ul的第一个子元素*/ ul li:first-child{ background: #0f35ad; } /*ul的最后一个子元素*/ ul li:last-child{ background: #0f3…

ExcelPatternTool 开箱即用的Excel工具包现已发布!

文章目录 ExcelPatternTool功能特点&#xff1a;快速开始使用说明常规类型高级类型Importable注解Exportable注解IImportOption导入选项IExportOption导出选项单元格样式StyleMapping样式映射使用数据库作为数据源 示例Sample1&#xff1a;不同类型字段导出Sample2&#xff1a;…

ChatGLM系列七:LangChain+ChatGLM-6B

背景介绍 在开发过程中&#xff0c;我们经常会遇到需要构建基于本地知识库的问答系统的问题。这种系统需要能够根据用户提供的问题&#xff0c;在本地的知识库中查找并返回相关答案。然而&#xff0c;要实现这样的功能并不容易&#xff0c;涉及到语言模型的选择、知识库的管理…

Vsan数据恢复—Vsan存储断电导致虚拟机无法启动的数据恢复案例

Vsan分布式存储故障&检测&#xff1a; 异常断电导致一台vsan存储设备上层虚拟机无法启动。 将故障Vsan存储上的所有磁盘编号后取出&#xff0c;由北亚企安的硬件工程师对vsan存储上的所有硬盘进行物理故障检测&#xff0c;经过检测没有发现硬盘存在物理故障。 vsan存储结构…

问界新M7也扛起“遥遥领先”大旗,华为究竟做对了什么?

循着时间脉络&#xff0c;华为似乎正在实现全方面的“遥遥领先”。 继Mate 60系列手机产品的强势回归之后&#xff0c;华为参与的汽车项目也登上了“热搜榜”。近段时间&#xff0c;问界新M7正处于“卖爆”状态。 据了解&#xff0c;2023年9月12日&#xff0c;华为发布了问界…

公网IP怎么设置?公网ip有哪些优点和缺点?

随着互联网的普及&#xff0c;越来越多的人开始关注网络安全和隐私保护。其中&#xff0c;公网IP的设置成为了一个备受关注的话题。本文将详细介绍公网IP的设置方法以及公网IP的优点和缺点。 一、公网IP设置方法 1. 路由器设置 在家庭或企业网络中&#xff0c;路由器通常是最重…

【Linux】开发工具

目录 Linux编译器-gcc/g使用执行命令&#xff1a;我们的.o和库是如何链接的? make/Makefile依赖关系、依赖方法 Linux编译器-gcc/g使用 gcc只能编译c语言&#xff0c;g可以编译c语言也可以编译g 背景知识&#xff1a; 预处理&#xff08;进行宏替换)编译&#xff08;生成汇编)…

荣耀推送服务消息分类标准

前言 为了提升终端用户的推送体验、营造良好可持续的通知生态&#xff0c;荣耀推送服务将对推送消息进行分类管理。 消息分类 定义 荣耀推送服务将根据应用类型、消息内容和消息发送场景&#xff0c;将推送消息分成服务通讯和资讯营销两大类别。 服务通讯类&#xff0c;包…

JS清除字符串中的空格

一、replace()方法 replace方法在字符串中搜索值或正则表达式&#xff0c;返回已替换值的新字符串&#xff0c;不会更改原始字符串。 去除字符串内所有的空格&#xff1a;str str.replace(/\s*/g,“”) 去除字符串内两头的空格&#xff1a;str str.replace(/^\s*|\s*$/g,“…

Mac怎么清理磁盘空间?释放Mac磁盘空间有效方法

相信很多使用macOS系统的小伙伴都收到过提示“磁盘空间已满”消息&#xff0c;尤其是采用SSD固态硬盘的MacBook系列&#xff0c;120G的硬盘空间本就捉襟见肘&#xff0c;使用一段时间后&#xff0c;即使自己没有存放很多大文件&#xff0c; Mac的磁盘很快就满了。那么&#xff…

使用python实现http协议的方法

要使用Python编写一个接口&#xff0c;其入参格式为x-www-form-urlencoded&#xff0c;你可以使用requests库。requests库是一个流行的HTTP库&#xff0c;它使得发送HTTP请求变得非常简单。 下面是一个简单的示例&#xff0c;展示如何使用requests库发送一个POST请求&#xff…