什么是动态组件以及使用场景
文章目录
- 一、vue中的动态组件是什么?有什么用?
- 二、使用demo
- 1.tab页签中的使用
- 2.模拟新闻页demo
- 三、用keep-alive包裹,保持状态
- 总结
一、vue中的动态组件是什么?有什么用?
动态组件指可以动态切换组件的显示和隐藏。
使用场景:比如,某些场景会需要在两个组件间来回切换,如Tab界面;再比如,新闻详情页,不确定要渲染的是图片相关组件还是文件相关组件,有可能都渲染或渲染其中一个或其中多个混合。不知道渲染什么类型的组件,可以用动态组件。
写法:
<component>
是组件的占位符- 通过is属性动态指定要渲染的组件名称
<component is ="要渲染的组件的名称"></component>
点击跳转动态组件的官网地址
二、使用demo
1.tab页签中的使用
代码如下(示例):
<template><el-tabsv-model="activeName"@tab-click="handleClick"><el-tab-pane label="页签1" name="组件1">页签1</el-tab-pane><el-tab-pane label="页签2" name="组件2">页签2</el-tab-pane></kui-tabs><keep-alive><!-- 动态组件 --><component :is="组件1"></component></keep-alive>
</template>
<script setup>import 组件1 from './组件1.vue'import 组件2 from './组件2.vue'
// ....activeName = '页签1'handleClick(tab) {this.activeName = tab.name;}
</script>
2.模拟新闻页demo
代码如下(示例):
<template><div><!-- 动态组件 --><div v-for="(val, key) in newsData" :key="key"><component :is="val.type" :data="val.data"/></div></div>
</template>
<script>import text form './text.vue'import img from './img.vue'...export default {...data() {return {newsData: [{type: 'text', data:[]},{type: 'img', data:[]},...]}}}
</script>
三、用keep-alive包裹,保持状态
当使用<component :is="...">
来在多个组件间作切换时,被切换掉的组件会被卸载。我们可以通过<KeepAlive>
组件强制被切换掉的组件仍然保持“存活”的状态。
<!-- currentTab 改变时组件也改变 --><keep-alive><component :is="tabs[currentTab]"></component></keep-alive>
总结
动态组件可以动态切换组件的显示与隐藏。
不知道渲染什么类型的组件,需要根据数据确定组件类型时,可以使用动态组件。
相关文章:
什么是动态组件以及使用场景
文章目录 一、vue中的动态组件是什么?有什么用?二、使用demo1.tab页签中的使用2.模拟新闻页demo 三、用keep-alive包裹,保持状态总结 一、vue中的动态组件是什么?有什么用? 动态组件指可以动态切换组件的显示和隐藏。…...
CRM销售管理系统如何提高销售效率
CRM销售管理系统是帮助企业对销售活动进行管理、执行和优化的软件系统。它可以帮助企业提高销售效率,提高客户转化率,实现企业的业绩增长。那么,CRM销售管理系统好用吗? CRM销售管理系统的功能 线索管理: CRM系统可…...
纯小白安卓刷机1
文章目录 常见的英文意思刷机是什么?为什么要刷机?什么是BL锁(BootLoader锁)?我的机能够刷机吗?什么是Boot镜像/分区?什么是Recovery镜像/分区(缩写为rec)?什…...
C高级day4循环语句
1,思维导图 运行结果为: 运行结果为:...
Linux 操作系统云服务器安装部署 Tomcat 服务器详细教程
Tomcat 基本概述 Tomcat 服务器是Apache软件基金会(Apache Software Foundation)的 Jakarta 项目中的一个核心项目,由 Apache、Sun 和其他一些公司及个人共同开发而成。它是一个免费的开放源代码的 Web 应用服务器,属于轻量级应用…...
【易盾点选】
拿官网的点选做个例子吧,比较省事,水一篇~ 官网的接口目前都改成V3了,多了个dt参数,以及加密的一个函数也变动了下 点选坐标在这,加密函数未变,用逗号拼接 整个加密里的函数变了,直接重新…...
vue中打印指定dom元素
和window.print()效果一样,调出打印窗口,只是当前使用的插件是vue-print-nb 官网地址:vue-print-nb vue2中使用 安装插件 npm install vue-print-nb --save导入插件 import Print from vue-print-nb // 全局使用 Vue.use(Print);//or// 单…...
OpenCV(三十六):霍夫直线检测
1.检测直线的霍夫变换原理 2.检测直线函数HoughLines() 检测直线流程: Step1:将参数空间的坐标轴离散化。 Step2:将图像中每个非0像素通过映射关系求取在参数空间通过的方格 Step3:统计参数空间内每个方格出现的次数,选取次数大于某一值的方格作为表示直线的方格…...
文心一言 VS 讯飞星火 VS chatgpt (91)-- 算法导论8.3 4题
四、用go语言,说明如何在 O(n) 时间内,对 0 到 n 3 − 1 n^3-1 n3−1 区间内的n个整数进行排序。 文心一言: 在 O(n) 时间内对 0 到 n^3-1 区间内的 n 个整数进行排序,可以使用基数排序(Radix Sort)算法…...
keep-alive缓存三级及三级以上路由
需求需要缓存这个出入记录,当tab切换时不重新加载,当刷新页面时,或把这个关闭在重新打开时重新加载如图: (我这里用的是芋道源码的前端框架) keep-alive 1、include 包含页面组件name的这些组件页面,会被…...
vite vue项目 运行时 \esbuild\esbuild.exe 缺失 错误码 errno: -4058, code: ‘ENOENT‘,
vite vue项目运行 npm run dev 报错某个模块启动文件丢失信息 D:\PengYe_code\2\vite-vue3-admin>npm run dev> vite-vue3-admin1.0.2 dev > vitenode:events:504throw er; // Unhandled error event^Error: spawn D:\PengYe_code\2\vite-vue3-admin\node_modules\vi…...
favicon.ico网站图标不显示问题 Failed to load resource: net::ERR_FILE_NOT_FOU
上述问题主要由于网站的小图标无法显示导致的:可以检查如下部分: 1、是否存在一个favicon.ico文件在根目录下 2、如果存在,看是否写的相对路径:改为绝对路径 <link rel"shortcut icon" href"../favicon.ico&quo…...
微服务·架构组件之服务注册与发现-Nacos
微服务组件架构之服务注册与发现之Nacos Nacos服务注册与发现流程 服务注册:Nacos 客户端会通过发送REST请求的方式向Nacos Server注册自己的服务,提供自身的元数据,比如ip地址、端口等信息。 Nacos Server接收到注册请求后,就会…...
Linux驱动【day2】
mychrdev.c: #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include<linux/uaccess.h> #include<linux/io.h> #include"head.h" unsigned int major; // 保存主设备号 char kbuf[128]{0}; unsigned int…...
4、Nginx 配置实例-反向代理
文章目录 4、nginx 配置实例-反向代理4.1 反向代理实例一4.1.1 实验代码 4.3 反向代理实例二4.3.1 实验代码 【尚硅谷】尚硅谷Nginx教程由浅入深 志不强者智不达;言不信者行不果。 4、nginx 配置实例-反向代理 4.1 反向代理实例一 实现效果:使用 nginx…...
2023年世界机器人大会回顾
1、前记: 本次记录是我自己去世界机器人博览会参观的一些感受,所有回顾为个人感兴趣部分的机器人产品分享。整个参观下来最大的感受就是科学技术、特别是机器人技术和人工智能毫无疑问地、广泛的应用在我们日常生活的方方面面,在安全巡检、特…...
Mac系统 AndroidStudio Missing essential plugin:org.jetbrains.android报错
打开Android Studio,提示 Missing essential plugin:org.jetbrains.android错误,产生的原因是Kotlin被禁用。 解决的方法是删除disabled_plugins.txt,Mac OS对应的路径为: /Users/xzh/Library/Application Support/Google/AndroidStudio202…...
读书笔记:多Transformer的双向编码器表示法(Bert)-1
多Transformer的双向编码器表示法 Bidirectional Encoder Representations from Transformers,即Bert; 本笔记主要是对谷歌Bert架构的入门学习: 介绍Transformer架构,理解编码器和解码器的工作原理;掌握Bert模型架构…...
第二证券:股利支付率和留存收益率的关系?
股利付出率和留存收益率是股票出资中非常重要的目标,它们可以反映公司的盈余才能和未来开展的潜力。那么,二者之间究竟有什么联系呢? 一、股利付出率和留存收益率的定义 股利付出率是指公司向股东分配的股息占当期净利润的比例,通…...
煤矿虚拟仿真 | 采煤工人VR虚拟现实培训系统
随着科技的发展,虚拟现实(VR)技术已经逐渐渗透到各个行业,其中包括煤矿行业。VR技术可以为煤矿工人提供一个安全、真实的环境,让他们在虚拟环境中进行实际操作和培训,从而提高他们的技能水平和安全意识。 由广州华锐互动开发的采煤…...
buuctf crypto 【[GXYCTF2019]CheckIn】解题记录
1.打开文件,发现密文 2.一眼base64,解密一下 3.解密后的字符串没有什么规律,看了看大佬的wp,是rot47加密,解密一下(ROT5、ROT13、ROT18、ROT47位移编码)...
微服务05-Docker基本操作
Docker的定义 1.什么是Docker Docker是一个快速交付应用、运行应用的技术: 可以将程序及其依赖、运行环境一起打包为一个镜像,可以迁移到任意Linux操作系统运行时利用沙箱机制形成隔离容器,各个应用互不干扰启动、移除都可以通过一行命令完…...
OpenHarmony创新赛|赋能直播第三期
开放原子开源大赛OpenHarmony创新赛赋能直播间持续邀请众多技术专家一起分享应用开发技术知识,本期推出OpenHarmony应用开发之音视频播放器和三方库的使用和方法,助力开发者掌握多媒体应用技术的开发能力和使用三方库提升应用开发的效率和质量࿰…...
docker镜像详解
目录 什么是docker镜像镜像相关命令docker pulldocker imagesdocker searchdocker rmi导出 / 导入镜像 镜像分层镜像摘要镜像摘要的作用分发散列值 什么是docker镜像 Docker镜像是Docker容器的基础组件,它包含了运行一个应用程序所需的一切,包括代码、运…...
二叉树的顺序结构以及堆的实现——【数据结构】
W...Y的主页 😊 代码仓库分享 💕 上篇文章,我们认识了什么是树以及二叉树的基本内容、表示方法……接下来我们继续来深入二叉树,感受其中的魅力。 目录 二叉树的顺序结构 堆的概念及结构 堆的实现 堆的创建 堆的初始化与…...
手写一个摸鱼神器:使用python手写一个看小说的脚本,在ide中输出小说内容,同事直呼“还得是你”
文章目录 一、准备python环境二、分析小说网的章节目录三、分析小说网的章节内容四、编写python脚本五、验证一下吧 一、准备python环境 windows从0搭建python3开发环境与开发工具 Python爬虫基础(一):urllib库的使用详解 Python爬虫基础&a…...
【Python 实战】---- 实现批量图片的切割
1. 需求场景 在实际开发中,我们会遇到一种很无聊,但是又必须实现的需求,就是比如协议、大量的宣传页面、大量的静态介绍页面、或者大量静态页面,但是页面高度很高,甚至高度可能会达到50000px,但是为了渲染…...
MAYA粒子基础_场
重力场 牛顿场 径向场 均匀场和重力场的区别 空气场 推动物体 阻力场 推动物体 涡流场 湍流场 体积轴场...
趣解设计模式之《我买了宝马,为啥不让我停这?》
〇、小故事 我们怎么识别一辆汽车是宝马品牌的汽车呢?虽然宝马汽车车辆型号非常的多,而且外型也各不相同,但是只要是宝马品牌的汽车,它的车头一定会有宝马汽车的logo,那么这个就是大家最直观去确认一辆车是不是宝马牌…...
MyBatis Plus 中 LocalDateTime 引发的一些问题和解决办法
简介 在使用 MyBatis Plus 进行数据库操作时,我们经常会遇到处理日期时间类型的需求。然而,在某些情况下,使用 LocalDateTime 类型可能会引发一些问题。本文将详细介绍这些问题,并提供相应的解决办法。 问题描述: 1…...
徐州公司网站制作/华为手机网络营销策划方案
CULT3D 粒子系统的相关设置:1. 颜色设置 简单的说整体粒子的整个周期分为产生期、激活期和消亡期。在颜色设置项的下方的三角形颜色滑块,从左往右依次设置粒子系统产生的一个周期的颜色。上方的小圆圈是设置相邻两个颜色的中间色的位置。 具体…...
怎么样下载app软件/移动网站推广如何优化
https://www.imgtec.com/blog/a-look-at-the-powervr-graphics-architecture-tile-based-rendering/ 一种硬件结构 color target 分成tile 减小带宽 提前(fs)用depth做隐藏面消除 earlyz一个意思 减小cache missing 一行短了。。 所以early失效的都不可以…...
桑拿网站只做/高级搜索百度
一般我们下载SCI论文先在kopernio中查找,这个插件确实很方便。万一查找不到的话再去sci-hub上进行下载。 一、Kopernio插件 Kopernio是基于chrome浏览器的一款免费插件,通过人工智能技术使得用户可一键访问其所在机构订购的期刊论文,大大节省…...
淘宝网站建设哪个类目/营销成功的案例
文章目录简单选择排序基本思想:以炒股为喻,冒泡像炒短线,选择则是炒长线代码:交换次数非常少时间复杂度:O(n2)O(n^2)O(n2)堆排序:充分利用了完全二叉树的深度和序号信息堆 heap堆排序的原理堆排序的例子堆排序的代码&a…...
http做轮播图网站/中文搜索引擎排行榜
前面写好了数据访问工程DAL,但由于用户界面也要访问数据还有中间业务层也访问,为了访问方便还要处理一些业务逻辑,我们再给它封装一层DALService来操作DAL和对上层提供服务。 添加一个工程DALService,分别对DAL里面的每个类提…...
php网站开发 课程介绍/衡水seo排名
LTH7R座充充电管理 IC 一、 概述 LTH7R.是恒流/恒压座充充电器芯片,主要应用于单节锂电池充电。无需外接检测电阻,其内部为 MOSFET 结构,因此无需外接反向二极管。 LTH7R.在大功率和高环境温度下可以自动调节充电电流以限制芯片温度。它的充电…...