vue3插槽solt 使用

 背景增加组件的复用性,个人体验组件化还是react 方便。

Vue插槽solt如何传递具名插槽的数据给子组件?

一、solt 原理

知其然知其所以然

Vue的插槽(slots)是一种分发内容的机制,允许你在组件模板中定义可插入的内容,然后在使用组件的地方提供这些内容。

插槽的工作原理是这样的:

  1. 当Vue编译一个组件模板时,它会查找所有的<slot>元素。每个<slot>元素都代表一个插槽。

  2. 对于每个插槽,Vue会查看它是否有名字(通过name属性指定)。如果有,那么它就是一个具名插槽;如果没有,那么它就是一个默认插槽。

  3. 当Vue渲染一个组件时,它会查看组件的父上下文中是否提供了插槽内容。如果提供了,那么Vue会用这些内容替换掉插槽;如果没有提供,那么Vue会使用插槽的默认内容(如果有的话)。

  4. 插槽内容是在父上下文中编译的,但是它们可以访问子上下文中的数据。这是通过作用域插槽实现的,你可以在插槽内容中使用特殊的<template>元素,并通过v-slot指令提供一个可以访问子上下文中数据的模板。

这就是Vue插槽的基本工作原理。插槽是Vue组件系统的一个重要部分,它们提供了一种灵活的方式来组合和重用组件。

二、单个插入结构

子组件

上文略....<el-table :data="tableData" style="width: 100%"><slot></slot>
</el-table>下文略....

父组件中,你可以这样使用ExportRecordsModal组件,并填充插槽:

<ExportRecordsModalv-model:diaShow="diaShow":onDialogClose="onDialogClose":onDownLoad="downLoad":tableData="tableDataList":diaPagination="diaPagination":sizeChangeDia="sizeChangeDia":currentChangeDia="currentChangeDia"
>// 插槽DOM<el-table-column label="导出时间"><template #default="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column>
</ExportRecordsModal>

三、多个插槽

子组件

上文略....<el-table :data="props.tableData" style="width: 100%"><slot name="column1"></slot><slot name="column2"></slot>
</el-table>下文略....

父组件

<ExportRecordsModalv-model:diaShow="diaShow":onDialogClose="onDialogClose":onDownLoad="downLoad":tableData="tableDataList":diaPagination="diaPagination":sizeChangeDia="sizeChangeDia":currentChangeDia="currentChangeDia"
><template #column1><el-table-column label="序号"><template #default="scope"><span>{{ scope.row.createTime }}</span></template></el-table-column></template><template #column2><!-- 你的第二个列定义 --></template>
</ExportRecordsModal>

实现前

 实现后

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

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

相关文章

Python 实现Word (DOC或DOCX)与TXT文本格式互转

目录 引言 安装Python库 使用Python将Word转换为TXT文本格式 使用Python将TXT文本格式转换为Word 引言 Word文档和TXT文本文件是日常工作和生活中两种常见的文件格式&#xff0c;各有其特点和优势。Word文档能够保留丰富的格式设置&#xff0c;如字体、段落、表格、图片等…

疲劳荷载的马尔科夫频次表示

文章目录 0 背景描述1 文章概述 0 背景描述 关于风电塔筒荷载中的马尔科夫矩阵&#xff0c;一直很好奇。最主要还是因为想要从两个已知截面的马尔科夫矩阵得到附近的另一个截面的载荷&#xff0c;我一直认为这件事情是可以完成的&#xff0c;但是因为对马尔科夫矩阵不太了解所…

Java入门基础学习笔记42——常用API

API&#xff08;全称&#xff1a;Application Programming Interface&#xff1a;应用程序编程接口&#xff09; 就是Java自己写好的程序&#xff0c;给程序员调用&#xff0c;方便完成一些功能的。 为什么要学别人写好的程序&#xff1f; 不要重复造轮子。 开发效率高。 面…

sql server使用 SELECT INTO 进行数据表备份和创建临时中间表

在数据库操作中&#xff0c;常常需要将数据从一个表复制到另一个表&#xff0c;或将部分数据保存到一个新的表中进行进一步操作。SELECT INTO 是一个强大的 SQL 语句&#xff0c;可以在 SQL Server 和部分其他数据库系统中实现这一功能。本文将讨论如何使用 SELECT INTO 进行数…

YOLOv5改进 | 主干网络 | 用repvgg模块替换Conv【教程+代码 】

&#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 尽管Ultralytics 推出了最新版本的 YOLOv8 模型。但YOLOv5作为一个anchor base的目标检测的算法&#xff0c;YOLOv5可能比YOLOv8的效果更好。…

2024电工杯数学建模选题建议及各题思路来啦!

大家好呀&#xff0c;2024电工杯数学建模竞赛开始了&#xff0c;来说一下初步的选题建议吧&#xff1a; 首先定下主基调&#xff0c; 本次电工杯建议选B。A题目难度较高&#xff0c;只建议有相关专业知识和优化经验的队伍选择&#xff0c;小白队伍无脑选B即可。是比较经典的数…

网页加载时,大图片文件如何分片加载,有示例代码。

浏览网页时候&#xff0c;碰到大图片半天加载不出来&#xff0c;急死人&#xff0c;本问分享一种分片加载的方式&#xff0c;其实还有其他方式&#xff0c;比如先模糊后清晰等。 一、为什么要分片加载 大图片文件可以通过分片加载来提高加载性能和用户体验。分片加载的基本思…

【MySQL精通之路】InnoDB(7)-锁和事务模型

1.InnoDB锁 【MySQL精通之路】InnoDB(7)-锁和事务模型(1)-锁-CSDN博客 2.InnoDB事务模型 【MySQL精通之路】InnoDB(7)-锁和事务模型(2)-事务模型-CSDN博客 3.InnoDB中不同SQL语句设置的锁 4.幻影行 5.InnoDB中的死锁 5.1InnoDB死锁示例 5.2死锁检测 …

PointCloudLib 点云Ransac拟合平面功能实现 C++版本

0.实现效果 左图为原始点云,右图中的红色点为拟合平面所选取的点,绿色的点为拟合平面所抛弃的点 拟合出的结果是一个平面方程。 1.算法原理 RANSAC(Random Sample Consensus,随机样本一致性)算法在拟合平面时的工作原理可以概括为以下几个步骤: 随机选择最小样本集: R…

PTK密钥传递攻击

一. PTK密钥传递攻击原理 1. PTK介绍 PTK(Pass The key)&#xff0c;中文叫密钥传递攻击&#xff0c;PTH传递中&#xff0c;使用的是NTLM-HASH值&#xff0c;PTK使用 AES256或者AES128的方式进行传递,PTK 攻击只能用于kerberos认证中,NTLM认证中没有&#xff01; 2.PTK的原理…

MongoDB 去重 分组

最近在做客服聊天系统遇到的一些小问题&#xff0c;记录一下。 java 项目&#xff0c;使用的是 MongoTemplate 1.去重 List<User> memberIds mongoTemplate.findDistinct(query, "memberId", MSG_PREFIX, User.class); query 查询条件 memberId 去重字段 …

官宣!正式成为淡人!向数据备份焦虑Say NO!

连轴转了十几天&#xff0c;想着终于要迎接美好的双休了&#xff0c;焦躁的心都变淡了。 但有时候压死骆驼的不是最后一根稻草&#xff1b; 当我终于剪好视频&#xff0c;满心欢喜导出时&#xff0c;却收到了一个令人沮丧的提示&#xff1a; “存储空间不足&#xff0c;请清…

本地连不上远程阿里云MySQL数据库,密码对就是连不上

三步解决 设置安全组&#xff1a; 设置防火墙&#xff1a; iptables -A INPUT -m state --state NEW -m tcp -p tcp --dport 3306 -j ACCEPT设置root用户连接host&#xff1a; 终端登录mysql&#xff0c;然后&#xff1a; use mysql; select user,host from user where use…

VUE3好看的酒网站模板源码

文章目录 1.设计来源1.1 首页界面1.2 十大名酒界面1.3 名酒新闻界面1.4 联系我们界面1.5 在线留言界面 2.效果和结构2.1 动态效果2.2 代码结构 3.VUE框架系列源码4.源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/detai…

【文末附gpt升级方案】欧盟率先立法:全球首个人工智能法律框架“AI法案”的深远影响与未来展望

欧盟率先立法&#xff1a;全球首个人工智能法律框架“AI法案”的深远影响与未来展望 摘要&#xff1a;随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其在经济、社会、文化等多个领域的应用日益广泛&#xff0c;但同时也带来了数据安全、隐私保护、伦理道…

vue项目中如何使用iconfont

导读&#xff1a;vue项目中引入iconfont的方式 iconfont 的三种使用方法 unicode 不常用Font class 像字体一样使用&#xff0c;默认黑色图标&#xff0c;无法修改颜色Symbol 支持多色图标&#xff0c;更灵活&#xff0c;推荐 一、unicode 略 二、Font class 方式一&#…

oneapi离线在docker部署时提示failed to get gpt-3.5-turbo token encoder

one-api部署在docker中&#xff0c;一直都正常。项目上线正式服务器后&#xff0c;发现one-api容器无法启动&#xff0c;日志发现其无限重启&#xff0c;错误原因是failed to get gpt-3.5-turbo token encoder&#xff0c;看来它肯定是需要联网下载数据&#xff0c;我的正式服务…

网页版收银系统比安装板收银系统的四大优势

在当今竞争激烈的零售市场中&#xff0c;高效的收银系统对于连锁实体店的管理至关重要。随着科技的不断发展&#xff0c;网页版收银系统成为越来越多零售企业的首选。网页版收银系统以其灵活性、可定制性和便利性&#xff0c;成为现代零售业的利器。本文将探讨网页版收银系统相…

BeanDefinition作用

BeanDefinition接口 BeanDefinition 描述一个 Bean 实例&#xff0c;这个实例有哪些属性值、构造函数以及一些其他信息&#xff0c;就是描述Bean实例的信息。 BeanDefinition是一个接口&#xff0c;允许BeanFactoryPostProcessor 内省和修改属性值和其他 Bean 元数据。 点击了…

【加密与解密(第四版)】第十五章笔记

第十五章 专用加密软件 15.1 认识壳 15.2 压缩壳 UPX、ASPack、PECompact 15.3 加密壳 ASProtect(压缩、加密、反跟踪代码、CRC校验、花指令)、Armadillo(穿山甲)、EXECryptor、Themida 15.4 虚拟机保护软件 虚拟机引擎&#xff08;编译器解释器虚拟CPU环境指令系统&#xff…