程序员经验分享-hwhale

vue3中的Suspense组件

2023-11-09

用法 插槽名字固定

 

 

形成一个异步组件

比如这边 如果我们像之前那样进行静态引入的话,比如

child组件迟迟没有加载完毕,那么整个app.vue组件也不会出现,而是要等到child加载完毕了之后再一起出现

而使用了defineAsyncComponent就可以实现动态引入,即如果child组件还没有加载好,但是app组件就会先出来,到child组件加载完毕后,child也会显示出来

 

 

 但是会发现,如果这样直接使用异步引入的话,会导致一开始你看到app组件还以为没东西

所以我们可以使用suspens组件,可以实现当组件还没加载完毕,显示出其他内容

相当于suspense 里面有两个插槽,一个插槽里面放入的是你真正要在页面中显示的内容,而另一个插槽里面放的是,当组件还没显示时显示的内容

 

 

扩展

当我们使用了异步引入了组件

而且模板中也使用了suspense

那么这个引入的组件的setup就可以是一个异步操作

比如return 一个promise

 

 

 

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue3

vue3中的Suspense组件 的相关文章

  • vue3 父子组件传参详解

    前言 我引用了大佬的文章 但我实在找不到网址链接了 我记录在笔记上的 如果大佬看见了 麻烦给我说一下 我注明一下出处 建议先看son vue 里面写了那三种方式 首先放一个我的demo defineProps什么的父子传参api不用引入 直

  • vue3的一些知识点plus--4

    二十六 hooks使用 hooks 复用代码进行封装 钩子函数 和vue2中的mixins相似 将共同部分抽离出来 也有开源的库 vueUse 包含各种hooks 可以在 官网 查看 我们自己怎么编写呢 要知道hook底层就是个函数 返回p

  • Vite创建Vue项目常用的vite.config.ts配置

    import fileURLToPath URL from node url import defineConfig loadEnv from vite import vue from vitejs plugin vue import ba

  • Vue3.2中使用swiper实现层叠式轮播图

    介绍 在 vue3 中使用 swiper 实现缩略图的轮播图效果 具体如下图所示 代码

  • Vue3中的computed函数详解

    计算属性是Vue中常用的一种方式 主要用于在模板中放置逻辑计算 方便开发者进行数据操作和展示 在Vue3中 计算属性依然是非常重要的一种功能 而computed函数则更加的方便计算属性的使用 本文将对Vue3中的computed函数进行详细

  • vue3+vite中使用path-to-regexp以及相关的报错问题

    前言 path to regexp 该方法的作用是把字符串转为正则表达式 一般我们使用动态匹配路由的时候会用到这个 1 介绍path to regexp 更多点我查看 pathToRegexp pathToRegexp foo bar 打印

  • vue新一代的状态管理器之pinia

    Pinia 简介 Pinia 是 Vue 新一代的轻量级状态管理库 相当于 Vuex 也是 Vue 核心团队推荐的状态管理库 同时支持 Vue2 和 Vue3 未来很有可能替代 Vuex 比 Vuex 更容易上手 特性 Pinia 具有以下

  • Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint

    Eslint 配置 ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具 ESLint 能够帮你轻松写出高质量的 JavaScript 代码 1 建议 vscode 安装 Eslint 的插件 这个插件

  • Vue3 + Element Plus 按需引入 - 自动导入

    文章目录 1 前言 1 1 目的 1 2 最终效果 2 准备工作 3 按需引入 3 1 安装插件 3 2 修改 vite config ts 文件 4 其他 4 1 ElMessageBox 使用时报错 4 1 1 Eslint 报错 El

  • Vue3全局提示（Message）

    Vue2全局提示 Message 可自定义设置以下属性 自动关闭的延时 duration 类型 number 单位ms 默认 3000ms 消息距离顶部的位置 top 类型 number 单位px 默认 30px 调用一次只展示一个提示 调

  • vue3中使用vueQuill富文本编辑器详细教程，图片上传-图片压缩

    vueQuill是支持vue3的富文本编辑器组件 使用简单方便 官方网址 https vueup github io vue quill 效果图 1 安装 在官网有详细的安装教程 npm或者yran下载 npm install vueup

  • vue3知识点：setup

    文章目录 二 常用 Composition API 1 拉开序幕的setup setup的两个注意点 本人其他相关文章链接 二 常用 Composition API 问题 啥叫 组合式API 答案 请看官方文档 https v3 cn vu

  • Vue3、setup的使用

    Vue3 setup ref reactive toRef toRefs 1 setup的使用 1 1 简介 1 2 setup注意点 1 3 定义响应式数据 1 4 toRefs 1 5 setup中执行方法 1 5 1 方式一 1 5

  • Vue3 -- teleport传送门

    目录 teleport传送门 例 蒙层特效 目标效果 代码演示 页面效果 未使用teleport存在的问题 使用teleport实现目标效果 完整代码 总结 teleport传送门 Teleport 是一种能够移动 DOM到Vue根节点之外

  • vue.js -- 条件渲染

    目录 条件渲染 v if的用法 v if v else的用法 v if v else if v else的用法 v show的用法 v if 和 v show 的区别 条件渲染 v if的用法 代码演示

  • Vue3状态管理库Pinia——核心概念（Store、State、Getter、Action）

    个人简介 个人主页 前端杂货铺 学习方向 主攻前端方向 正逐渐往全干发展 个人状态 研发工程师 现效力于中国工业软件事业 人生格言 积跬步至千里 积小流成江海 推荐学习 前端面试宝典 Vue2 Vue3 Vue2 3项目实战 Node js

  • vue3学习笔记（1）script引入vue3实现简单应用

    Vue3专栏入口 目录 一 脚本引入简单使用 二 双向绑定的基本表现 一 脚本引入简单使用 script引入 简单使用实现数据渲染 div h1 counter num h1 div

  • 公司后台管理系统搭建（Vue3+Vite+Element Plus+TypeScript+Pinia）

    前言 此次项目搭建选用 Vue3 Vite 并使用 pnpm 管理依赖包 本文将从下载到项目创建记录项目全过程 一 项目搭建 1 使用 npm 下载 pnpm 使用 pnpm 依赖包将被存放在一个统一的位置 因此可以节省大量的硬盘空间以及提

  • vue3使用babel-plugin-import按需引入element-plus

    vue3使用babel plugin import按需引入element plus 2022年6月13日更新 用babel plugin import按需引入element plus会有问题 用官方推荐的方式真香了 以下是链接 https

  • Vue3+Echarts：堆积柱状图的绘制

    一 需求 在Vue3项目中 想用Echarts来绘制堆积柱状图 去展示最近一周APP在不同渠道的登录人数 效果如下 二 实现 关于Echarts的下载安装以及图表的样式设计 此处不展开 1 Templates部分

随机推荐

  • 2022年蓝桥杯省赛 C/C++ A组B题灭鼠先锋题解

    问题描述 本题为填空题 只需要算出结果后 在代码中使用输出语句将所填结果输出即可 灭鼠先锋是一个老少咸宜的棋盘小游戏 由两人参与 轮流操作 灭鼠先锋的棋盘有各种规格 本题中游戏在两行四列的棋盘上进行 游戏的规则为 两人轮流操作 每次可选择在

  • 《UNIX网络编程》卷一第四章学习笔记

    UNIX网络编程 卷一第四章学习笔记 4 2 socket函数 include

  • 2023华为OD机试真题【计算快递业务主站点/回溯法/深度优先搜索】

    题目描述 快递覆盖的范围有N的站 如果A和B都可以用来中转 我们就称A B站可达 如果A B可达 B C可达 则A C达 我们现在有N个编号 如果s i j 1 表示i j可达 如果s i j 0 表示i j不可达 现用二维数组给定N个站点

  • 使用python爬取微信公众号文章

    一 背景 有时候看到某一个微信公众号中的文章 觉得写的非常不错 有种当时就想把该公众号所有的文章都看完的冲动 但是使用手机看不是特别方便 就想把文章全部下载下来到电脑上面看 二 爬虫实现步骤 使用python爬取微信公众号文章 总共分为如下

  • 图片加载防闪动的CSS方法

    图片闪动 在移动端设置图片布局时 图片使用自适应的方式 其父元素的高度是被图片高度撑开的 在图片加载前 父元素高度为0 加载后 父元素高度为图片高度 这样的过程会造成视觉上的闪烁 影响用户体验 因此 在用图片撑开父元素高度之前 就需要给父元

  • 安装sql server时提示缺少.NET 3.5 sp1

    这几天遇到了一个问题 在安装sql server的时候总是提示我没有安装 NET framework 3 5 sp1 但是我电脑上已经安装了它 多次尝试之后我百思不得其解 今天终于解决了 我的系统是win8升级上来的win10 在升级的时候

  • 一种横向业务的解决方案 -- AOP

    AOP Aspect Oriented Programming 即面向切片编程 所谓面向切片编程 就是可以按照时间 将程序分成无数个时间节点 利用AOP的思想 可以在任何一个时间节点插入其他的代码 来实现自己的业务需求 换句话说 对于那些非

  • java循环栅栏CyclicBarrier 使用详解

    1 CyclicBarrier 是什么 从字面上的意思可以知道 这个类的中文意思是 循环栅栏 大概的意思就是一个可循环利用的屏障 它的作用就是会让所有线程都等待完成后才会继续下一步行动 举个例子 就像生活中我们会约朋友们到某个餐厅一起吃饭

  • 单片机c语言屏蔽第四位,【单片机C语言基础入门】第四章：运算符与表达式

    大家好 今天和大家探讨的是单片机C语言中的运算符和表达式 前边介绍了C语言中的变量的表示 然而在计算的过程中只有变量是不能完成计算的 因此运算符和表达式为变量 包括常量 来做特定的操作 来实现数据的运算 因此运算符和表达式是C语言中不可或缺

  • 网卡多队列 (解决traceroute路由不能直达）以及高丢包问题

    多队列指实例规格支持的最大网卡队列数 单个ECS实例vCPU处理网络中断存在性能瓶颈时 您可以将实例中的网络中断分散给不同的CPU处理 经测试 在相同的网络PPS和网络带宽的条件下 与1个队列相比 2个队列最多可提升性能达50 到100 4

  • Keras-9 实现Seq2Seq

    A ten minute introduction to sequence to sequence learning in Keras 简单介绍如何用Keras实现Seq2Seq模型 原文链接 https blog keras io a t

  • SIMD简介

    SIMD简介 知乎本篇文章包含的内容有SIMD指令集简介以及简短的practice环节 1 SIMD的历史与分类SIMD Single Instruction Multiple Data 即单指令流多数据流 是一种采用一个控制器来控制多个处

  • 【EI检索】第五届信号处理与机器学习国际会议

    2022年第五届信号处理与机器学习国际会议 SPML 2022 及其分会2022年第四届人工智能技术国际会议 AITC 2022 将于2022年8月4 6日在中国大连召开 SPML AITC 2022目前已成功在上海 杭州 北京 线上召开过

  • c++实验总结_史上最全场景文字检测资源合集（70篇重要论文 + 15个开源代码 + 176个实验结果 + 1305个统计信息）...

    本文总结了2012年以来在场景文本检测领域的70篇代表性论文 21个常用数据集 15份开源代码 包含176个实验结果以及超过1300条统计信息 Github资源链接见文末 一 前言 许多自然场景中包含着丰富的文本信息 对于理解自然场景图像有

  • 2020 mse 清华_【清华大学】清华大学2020届推免生入围名单汇总

    我把能找到的清华入围名单 进入复试名单 都给大家发一下 做一个资料备份 尤其是有些系所的名单有本科学校 这可是非常珍贵的分析资料 首先给我的现在专业 招生简章 清华大学经济管理学院 http masters sem tsinghua edu

  • pop服务器未响应,servlet测试控制台无反应啊？？求大神帮忙，

    String path request getContextPath String basePath request getScheme request getServerName request getServerPort path gt

  • 几种用户相似度计算方法及其优缺点

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 进行用户协同过滤时 一个关键问题是如何计算用户之间的相似性 比较常见的计算用户相似度的算法有余弦相似性 皮尔森系数 调整余弦相似性三种 这三种相似性都是基于一个称为用户 项

  • Dos常用命令及解释大全

    目录 前言 一 系统信息 二 网络 三 用户 四 端口进程服务 五 共享 六 文件操作 总结 前言 DOS是 磁盘操作系统 Disk Operating System 的缩写 它是一种早期的操作系统 最初在20世纪80年代广泛用于个人计算机

  • 完成U-net细胞分割的一些准备

    使用本地上传文件 from google colab import files uploaded files upload for fn in uploaded keys print User uploaded file name with

  • vue3中的Suspense组件

    用法 插槽名字固定 形成一个异步组件 比如这边 如果我们像之前那样进行静态引入的话 比如 child组件迟迟没有加载完毕 那么整个app vue组件也不会出现 而是要等到child加载完毕了之后再一起出现 而使用了defineAsyncCo

热门标签