【VUE 具名插槽的应用】

具名插槽类似于提前将布局安排好,但内容为空,一旦有具体内容填充进来,可以很和谐的展示,不影响整体效果。🍇
“举个🌰:系统里大部分页面的查询条件是相同的,所以需要封装一个公用的查询条件组件
但是又有个别页面比原来的查询条件多几个,此时具名插槽就能很好解决这个问题”

一、具名插槽未填充内容时

子组(child)件代码如下:
组件里现在预定义了两个具名插槽

<el-form :model="form" label-width="100px"><el-form-item label="姓名"><el-input placeholder="请输入内容" v-model="form.name" clearable /></el-form-item><el-form-item label="年纪"><el-input placeholder="请输入内容" v-model="form.age" clearable /></el-form-item><slot name="otherItem"></slot><el-form-item><el-button type="primary" icon="el-icon-search">查询</el-button><slot name="otherButton"></slot></el-form-item>
</el-form>

父组件代码如下:
简单的直接引用

<child></chlid>

页面效果🍑:
在这里插入图片描述

二、给插槽填充内容

template 分别给两个具名插槽填充了内容

<child><template v-slot:otherItem><el-form-item label="职业"><el-input placeholder="请输入内容" v-model="form2.career" clearable /></el-form-item><el-form-item label="住址"><el-input placeholder="请输入内容" v-model="form2.address" clearable /></el-form-item></template><template v-slot:otherButton><el-button type="primary" icon="el-icon-download">下载文件</el-button></template>
</child>

此时页面效果 🧘‍♀️ :
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

【2024最新华为OD-C/D卷试题汇总】目录管理器 (200分) - 支持在线评测+三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 在线评测链接 目录管理器 (200分) 🌍 评测功能需要订阅专栏后私信联系清隆解…

【Python Cookbook】S01E23 以不区分大小写的方式对文本做查找和替换 re.IGNORECASE

目录 问题解决方案讨论 问题 如果我们需要从一段字符串中以不区分大小写的方式做查找和替换&#xff0c;该怎么做&#xff1f; 解决方案 正则化模块 re 提供 re.IGNORECASE 标识从而实现以不区分大小写的方式做查找和替换。 查找 re.findall() import retext "UPPER…

如何在QGIS中加载高清卫星影像?

我们在《如何在GlobalMapper中加载高清卫星影像》一文中&#xff0c;分享了在GlobalMapper中加载卫星影像的方法。 这里再为你分享如何在QGIS中加载高清卫星影像的方法&#xff0c;并可以在文末查看领取软件安装包和图源的方法。 如何加载高清图源&#xff1f; 要在QGIS中在…

接口签名和postman预处理生成签名

nestjs后端代码 controller Get(md5hmacSHA1b64)postMd5hmacSHA1b64(Req() request: Request, Query() query) {// 获取GET请求参数const queryParamsMap new Map(Object.entries(query));return this.handleMd5hmacSHA1b64(queryParamsMap, request);}Post(md5hmacSHA1b64)U…

单点登录(SSO)前端怎么做

单点登录&#xff08;SSO&#xff09;前端怎么做 本文介绍单点登录&#xff08;SSO&#xff09;是什么&#xff0c;还有就是前端怎么做。 单点登录&#xff08;SSO&#xff09;是什么 单点登录&#xff08;SSO&#xff0c;Single Sign On&#xff09;&#xff0c;是在企业内部…

【再探】Java—Java 沙箱机制与类加载器

沙箱&#xff08;Sandbox&#xff09;机制是将Java程序限定在JVM特定的运行范围内&#xff0c;并严格限制代码对本地系统资源的访问&#xff0c;以保证代码的有效隔离&#xff0c;防止对本地系统造成破坏。 1 安全模型 类在加载过程中&#xff0c;类加载器会为类设置初始的安…

PyQt5中按钮长按指定时间后松开触发(鼠标事件)

背景&#xff1a;为了节约人力测试成本&#xff0c;模拟鼠标长按后松开&#xff0c;整理了这个简单的小demo 1、关键方法 实例鼠标按下事件 QMouseEvent(QEvent.MouseButtonPress, self.p_pos, Qt.MouseButton.LeftButton, Qt.MouseButton.LeftButton, Qt.NoModifier)实例…

常见的项目模块以及项目流程

1.图片轮播功能咋测的 接口&#xff0c;功能&#xff0c;影响面&#xff0c;性能&#xff0c;新旧数据兼容性测试 第一&#xff0c;测试环境查看旧数据功能是否正常&#xff0c;新增图片轮播是否正常&#xff0c;第二&#xff0c;自己写一个数据库数据迁移脚本将老数据迁移到…

gstreamer+mpp调用硬解码播放视频

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、cpu解码二、gstreamermpp1.默认已安装2.没安装必要软件 总结 前言 以前一直在MPP上开发硬解码推理&#xff0c;最近想弄一个盒子支持调用mpp硬解码播放视频…

跑图像生成模型GAN时,遇到OSError: cannot open resource 报错解决办法

报错信息如下&#xff1a; Traceback (most recent call last): File "/root/autodl-tmp/ssa-gan/pretrain_DAMSM.py", line 276, in <module> count train(dataloader, image_encoder, text_encoder, File "/root/autodl-tmp/ssa-gan/pretrain_DAMSM.py…

QT Creator与QT的下载安装

0.起因/小结&#xff1a; 因为运行项目需要更高版本的QT。 下载了QT 6.2.0&#xff0c;但是里面的gcc&#xff0c;g&#xff0c;gdb是64bit的&#xff0c;而我的QT Creator是32bit的&#xff0c;所以又下载了QT 13.0.0的64bit版本。 遇到问题&#xff1a;msvcp140_1.dll找不到…

软件管理及部分命令

sed命令 格式&#xff1a; sed [选项] 操作 目标文件 选项&#xff1a; -i&#xff1a;修改原始文件【如果不加-i&#xff0c;那就是仅仅修改内存中的文件副本】 案例&#xff1a;将1.txt中的tom修改成jerry。 sed -i "s/tom/jerry/g" 1.txt 将1…

基于FPGA的任意点滑动平均(滑动窗长度和数据位宽参数化,例化时参数可设置)

目录 1.前言2.原理3.举例说明4.Matlab实现5.FPGA实现滑动平均 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 对于一维信号&#xff0c;我们可以使用类似移动平均滤波&#xff08;Moving Average Filtering&#xff09;实现denoising。Moving Average Filtering 是一种…

vue-router 源码分析——3. 动态路由匹配

这是对vue-router 3 版本的源码分析。 本次分析会按以下方法进行&#xff1a; 按官网的使用文档顺序&#xff0c;围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码&#xff0c;更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升&#xff0c;甚至面试时…

Jmeter性能分析及调优详解(入门)

一、系统性能理解 如果说需求、开发、DB、运维、测试是单一一门学科&#xff0c;那么性能就是综合学科&#xff0c;它包含了需求分析、DB、开发、测试、运维的所有学科。其实一般来说在实际性能分析和调优中&#xff0c;测试担任的角色就是写压测脚本并执行脚本查看结果&#…

TPM 是什么?如何查看电脑的 TPM?

TPM 是什么&#xff1f; 首先我们来了解一下 TPM 是什么&#xff0c;TPM 由可信计算组织&#xff08;Trusted Computing Group&#xff0c;TCG&#xff09;开发&#xff0c;为了在提高计算机系统的安全性。随着网络安全威胁的不断增加&#xff0c;TPM 技术逐渐成为确保系统安全…

PDF文件处理不再复杂:9个Python库让一切变得简单

大家好&#xff0c;这里是程序员晚枫&#xff0c;2年前发布了一个开源项目&#xff1a;python-office&#xff0c;目前在GitHub上有800⭐&#xff0c;最近在开发新功能时感觉Python知识有点不够用了。 所以打算从2方面补充自己的知识&#xff1a;研究优秀的第三方库和学习Pyth…

力扣算法题:多数元素 --多语言实现

无意间看到&#xff0c;力扣存算法代码居然还得升级vip。。。好吧&#xff0c;我自己存吧 golang&#xff1a; func majorityElement(nums []int) int {count : 0condidate : 0for _,val : range nums {if count 0 {condidate valcount 1} else if val condidate {count} …

Qt实现程序单实例运行(只能运行1个进程)及QSharedMemory用法

1. 问题提出 在开发时&#xff0c;经常遇到这样的需求或场景&#xff1a;程序只能被启动一次&#xff0c;不能启动多次&#xff0c;启动多次会导致混乱&#xff0c;如&#xff1a;可执行程序用到文件指针、串口句柄等。试想如果存在多个同一个文件的句柄或同一个串口的句柄&…