vue3 的内置组件汇总

官方给出的说明:

  • Fragment: Vue 3 组件不再要求有一个唯一的根节点,清除了很多无用的占位 div
  • Teleport: 允许组件渲染在别的元素内,主要开发弹窗组件的时候特别有用
  • Suspense: 异步组件,更方便开发有异步请求的组件

一、fragment 片断组件(了解)

  • 在 Vue2 中:组件必须有一个根标签。
  • 在 Vue3 中:组件可以没有根标签,内部会将多个标签包含在一个 fragment 的虚拟元素中。

这样的好处是:减少标签层级,减小内存占用。

二、teleport 瞬移组件

Teleport 是一种能够将 “我们的组件 html 结构” 移动到指定位置的技术。

使用 teleport 组件时,需要指定 “移动位置”:

<teleport to="移动位置"></teleport>

例如:用 suspense 实现全屏弹窗

父组件A:

<template><div class="tel_a"><h3>父组件A</h3><son /></div>
</template>
<script setup>import { defineAsyncComponent } from 'vue'const Son = defineAsyncComponent(() => import('./components/son.vue'))
</script>
<style lang="less" scoped>.tel_a {width: 30%;background: #aaa;padding: 10px 30px;}
</style>

子组件B:

<template><div class="tel_b"><div>子组件B</div><button @click="modalOpen = true"> 打开全屏弹窗(teleport) </button><teleport to="body"><div v-if="modalOpen" class="modal"><div class="content">我是一个teleport弹窗<br />(我的父组件是“body”)<button @click="modalOpen = false"> 关闭 </button></div></div></teleport></div>
</template>
<script setup>import { ref } from 'vue'const modalOpen = ref(false)
</script>
<style lang="less" scoped>.flex-center () {display: flex;align-items: center;justify-content: center;}.tel_b {padding: 10px;background: rgba(242, 177, 57);}.modal {.flex-center;position: absolute;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);.content {.flex-center;flex-direction: column;text-align: center;width: 260px;height: 160px;padding: 10px;background-color: #fff;button {display: block;margin-top: 30px;}}}
</style>

效果如下:
请添加图片描述

三、suspense 组件

suspense 组件支持:在等待异步组件加载时,渲染一些额外内容。不必非得等异步组件加载完毕再渲染,避免了因异步加载带来的白屏和闪屏问题的出现,提高了用户的体验。

suspense 的使用步骤:

  • 先异步引入组件——defineAsyncComponent
  • 然后用 suspense 包裹组件,并配置好 defaultfallback

先异步引入组件:

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

然后用 Suspense 包裹组件:

<template><div class="app"><h3>我是App组件</h3><Suspense><template #default><Child/></template><template #fallback><h3>加载中.....</h3></template></Suspense></div>
</template>

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

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

相关文章

Blazor项目如何调用js文件

以下是来自千问的回答并加以整理&#xff1a;&#xff08;说一句&#xff0c;文心3.5所给的回答不完善&#xff0c;根本运行不起来&#xff0c;4.0等有钱了试试&#xff09; 在Blazor项目中引用JavaScript文件&#xff08;.js&#xff09;以实现与JavaScript的互操作&#xff…

计算机网络-VLAN原理与配置

之前我们学习了以太网的基础知识&#xff0c;了解了网络交换设备的发展&#xff0c;交换机的工作原理&#xff0c;广播域和冲突域。 一、概述 还简单了解了以太网的CSMA/CD通讯机制&#xff0c;以太网是建立在CSMA/CD (Carrier Sense Multiple Access/Collision Detection&…

VPP配置指南:NAT“三板斧”

正文共&#xff1a;1024 字 15 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面我们介绍过VSR的NAT配置&#xff08;地址重叠时&#xff0c;用户如何通过NAT访问对端IP网络&#xff1f;地址重叠的时候怎么使用NAT解决访问问题&#xff0c;看这里&#xff09;&#xff0c;可…

k8s之pod

1、pod&#xff1a;k8s中最小的资源管理组件&#xff0c;最小化运行容器化应用的资源管理对象 &#xff08;1&#xff09;pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合 &#xff08;2&#xff09;一个pod中运行一个容器是最常用的方式 &#xff…

2020年认证杯SPSSPRO杯数学建模A题(第二阶段)听音辨位全过程文档及程序

2020年认证杯SPSSPRO杯数学建模 A题 听音辨位 原题再现&#xff1a; 把若干 (⩾ 1) 支同样型号的麦克风固定安装在一个刚性的枝形架子上 (架子下面带万向轮&#xff0c;在平地上可以被水平推动或旋转&#xff0c;但不会歪斜)&#xff0c;这样的设备称为一个麦克风树。不同的麦…

郑州大学算法设计与分析实验2

判断题 1 #include<bits/stdc.h> using namespace std;const int N 50; int f[N], n;int main() { // freopen("1.in", "r", stdin);ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin >> n;f[1] 1; f[2] 1;for(int i 3; i &l…

HttpRunner的测试用例分层机制

测试用例分层介绍&#xff1a; 在接口自动化测试维护过程中&#xff0c;由于测试用例的增加和需求变更导致测试用例的调整&#xff0c;使自动化测试用例的维护非常麻烦&#xff0c;直接关系到自动化测试能否持续有效地在项目中开展。 概括来说&#xff0c;测试用例分层机制的核…

数据库选择题 (期末复习)

数据库第一章 概论简答题 数据库第二章 关系数据库简答题 数据库第三章 SQL简答题 数据库第四第五章 安全性和完整性简答题 数据库第七章 数据库设计简答题 数据库第九章 查询处理和优化简答题 数据库第十第十一章 恢复和并发简答题 2015期末 1、在数据库中&#xff0c;下列说…

PHP运行环境之宝塔软件安装及Web站点部署流程

PHP运行环境之宝塔软件安装及Web站点部署流程 1.1安装宝塔软件 官网&#xff1a;https://www.bt.cn/new/index.html 自行注册账号&#xff0c;稍后有用 下载安装页面&#xff1a;宝塔面板下载&#xff0c;免费全能的服务器运维软件 1.1.1Linux 安装 如图所示&#xff0c;宝…

Redis - 挖矿病毒 db0 库 backup 反复出现解决方案

问题描述 腾讯云的服务器&#xff0c;使用 Docker 部署了 Redis 之后&#xff0c;发现 DB0 中总是出现 4 条 key&#xff0c;分别是 backup01backup02backup03backup04 而自己每次存入 db0 中的数据过一会就会被无缘无故删除掉。 原因分析 挖矿病毒 解决方案 在启动的时候…

外包干了1个月,技术退步一大半。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

软件工程:数据流图相关知识和多实例分析

目录 一、数据流图相关知识 1. 基本介绍 2. 常用符号 3. 附加符号 二、数据流图实例分析 1. 活期存取款业务处理系统 2. 工资计算系统 3. 商业自动化系统 4. 学校人事管理系统 5. 教材征订系统 6. 高考录取统分子系统 7. 订货系统 8. 培训中心管理系统 9. 考务处…

win10提示“KBDSF.DLL文件缺失”,游戏或软件无法启动运行,快速修复方法

很多用户在日常使用电脑的时候&#xff0c;或多或少都遇到过&#xff0c;在启动游戏或软件的时候&#xff0c;Windows桌面会弹出错误提示框“KBDSF.DLL文件缺失&#xff0c;造成软件无法启动或运行&#xff0c;请尝试重新安装解决”。 首先&#xff0c;先来了解DLL文件是什么&a…

前台收款单选择的保险公司 提示 往来户不属于该财务组织

前台收款单选择的保险公司 提示 往来户不属于该财务组织 问题避免 新增保险公司的时候&#xff0c;找一个已经存在的保险公司&#xff0c;利用多页签复制的方式来新增 保险公司 不然不能够自动生成 财务客户

Docker学习与应用(六)-Docker网络

1、Docker网络 Docker有多种网络模式可以选择&#xff0c;可以根据应用场景和需求选择合适的网络模式。 桥接模式&#xff08;Bridge Mode&#xff09;&#xff1a;默认情况下&#xff0c;Docker使用桥接模式创建一个虚拟网络&#xff0c;所有容器会连接到这个虚拟网络中。每个…

Qt qDebug基本的使用方法详解

目录 qDebug基本用法输出字符串输出变量值1输出变量值2支持流式输出输出十六进制去除双引号和空格调试输出级别 自定义类型输出自定义日志信息的输出格式示例占位符设置环境变量 关闭QDebug输出Qt工程VS工程 在VS工程中如何查看qDebug输出 DebugView下载 qDebug基本用法 qDebug…

在 sealos 上使用 redisinsight 完美管理 redis

先起一个 redis 集群&#xff0c;在 sealos 上可以点点鼠标就搞定&#xff1a; 简单两步&#xff0c;redis 集群搞定。 再启动 RedisInsight, 是一个 redis 的可视化管理工具。 就可以看到部署后的地址了。进去之后填写 redis 的链接信息即可&#xff1a; 链接信息在数据库的…

查询json数组

步骤一&#xff1a;创建表格 首先&#xff0c;我们需要创建一个表格来存储包含JSON对象数组的数据。可以使用以下代码创建一个名为 my_table 的表格&#xff1a; CREATE TABLE my_table (id INT PRIMARY KEY AUTO_INCREMENT,json_data JSON ); 上述代码创建了一个包含两个列的…

前端文件上传组件最全封装+删除+下载+预览

前言&#xff1a;使用的是若依的框架element uivue2封装的。如果有不对的地方欢迎指出。后台管理使用&#xff0c;文件需要上传。回显列表&#xff0c;详情也需要回显预览 // 开始封装组件&#xff1a;封装在 src/components/FileUpload/index.vue中 <template><div c…

微服务实战系列之API加密

前言 随着一阵阵凛冽寒风的呼啸&#xff0c;新的年轮不知不觉滚滚而来。故事随着2023的远去&#xff0c;尘封于案底&#xff1b;希望迎着新年&#xff0c;绽放于枝头。在2024新岁启航&#xff0c;扬帆破浪之时&#xff0c;让烦恼抛洒于九霄&#xff0c;让生机蓬勃于朝朝暮暮。 …