【vue】vue中插槽slot的用法详解

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,Golang开发,云原生开发,前后端框架,PyQt5和Tkinter桌面开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,云原生K8S集群搭建与管理,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏:前端零基础,实战进阶教学
景天的主页:景天科技苑

Vue插槽

插槽(Slot)是Vue.js中一个非常重要的概念,它极大地提高了组件的复用性和灵活性。通过插槽,我们可以自定义组件的内容,使其能够适应不同的场景。本文将结合实际案例,详细介绍Vue中插槽的基本用法、类型以及高级技巧。

一、插槽的基本概念

在Vue中,子组件的模板可以定义多个插槽(包括默认插槽和具名插槽等),而父组件在引用子组件时,可以根据需要有选择性地为这些插槽插入内容。如果父组件没有为某个插槽提供内容,那么子组件的模板中该插槽的位置将显示为该插槽的默认内容(如果有的话),或者简单地留空。

二、默认插槽

默认插槽是插槽家族中最简单的使用方式,它没有指定名称,用于接收父组件传递的未明确指定插槽名称的内容。

1. 基本语法

在子组件中使用<slot></slot>定义默认插槽的位置,父组件中直接放在子组件标签内的内容会被渲染到该位置。

2. 代码示例

子组件(DefaultSlotChild.vue):

<template><div class="child"><h2>我是子组件的标题</h2><!-- 默认插槽 --><slot></slot></div>
</template>

父组件:

<template><div><DefaultSlotChild><!-- 这里的内容会被渲染到子组件的默认插槽中 --><p>这是来自父组件的默认插槽内容1</p><p>这是来自父组件的默认插槽内容2</p></DefaultSlotChild></div>
</template><script>
import DefaultSlotChild from './DefaultSlotChild.vue';export default {components: {DefaultSlotChild}
}
</script>

在这个例子中,父组件传递了两个段落标签到子组件的默认插槽中,这两个段落标签会被渲染到子组件模板的<slot></slot>位置。

3. 后备内容(默认值)

如果父组件没有为默认插槽提供内容,子组件的模板中该插槽的位置可以显示后备内容(默认内容)。

<template><div class="child"><h2>我是子组件的标题</h2><!-- 默认插槽,带有后备内容 --><slot>这是默认插槽的后备内容</slot></div>
</template>

当父组件没有为默认插槽提供内容时,后备内容“这是默认插槽的后备内容”会被渲染出来。

三、具名插槽

具名插槽用于接收父组件中明确指定插槽名称的内容。它允许一个组件内有多个插槽,每个插槽可以有不同的内容。

1. 基本语法

在子组件中使用<slot name="插槽名称"></slot>定义具名插槽,父组件中通过<template v-slot:插槽名称>或简写为<template #插槽名称>来指定内容应该插入哪个具名插槽。

2. 代码示例

子组件(NamedSlotChild.vue):

<template><div class="child"><header><!-- 具名插槽: header --><slot name="header"></slot></header><main><!-- 默认插槽 --><slot></slot></main><footer><!-- 具名插槽: footer --><slot name="footer"></slot></footer></div>
</template>

父组件:

<template><NamedSlotChild><template v-slot:header><!-- 这里的内容会被渲染到子组件的header插槽中 --><h1>这是标题</h1></template><p>这是默认插槽的内容。</p><template v-slot:footer><!-- 这里的内容会被渲染到子组件的footer插槽中 --><p>这是页脚</p></template></NamedSlotChild>
</template><script>
import NamedSlotChild from './NamedSlotChild.vue';export default {components: {NamedSlotChild}
}
</script>

在这个例子中,父组件为子组件的header插槽和footer插槽分别提供了内容,而默认插槽则接收了一个段落标签。

3. v-slot的简写

v-slot的写法较长,Vue提供了一个简写方式,即将v-slot:简写为#

<template #header><!-- 这里的内容会被渲染到子组件的header插槽中 --><h1>这是标题</h1>
</template>

四、作用域插槽

作用域插槽是一种特殊的插槽,它允许子组件将数据暴露给父组件的插槽内容。这样,父组件可以使用子组件传递的数据来定制插槽的内容。

1. 基本语法

在子组件中,通过<slot :数据名="数据值"></slot>将数据传递给插槽。在父组件中,通过<template v-slot:插槽名称="slotProps">接收数据,并使用slotProps来访问传递过来的数据。

2. 代码示例

子组件(ScopedSlotChild.vue):

<template><ul><li v-for="item in items" :key="item.id"><slot name="item" :item="item">{{ item.text }}</slot></li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, text: '苹果' },{ id: 2, text: '香蕉' },{ id: 3, text: '橙子' }]}}
}
</script>

父组件:

<template><ScopedSlotChild><template v-slot:item="slotProps"><!-- 使用slotProps访问子组件传递的数据 --><strong>{{ slotProps.item.text }}</strong></template></ScopedSlotChild>
</template><script>
import ScopedSlotChild from './ScopedSlotChild.vue';export default {components: {ScopedSlotChild}
}
</script>

在这个例子中,子组件将items数组中的每个元素通过作用域插槽传递给父组件,父组件使用slotProps访问传递过来的数据,并将其渲染为粗体文本。

3. 动态插槽名

插槽的名称也可以是动态的,根据组件的状态或其他条件来决定使用哪个插槽。在父组件中,通过:slot="动态名称"来绑定插槽的名称,其中动态名称可以是一个计算属性、方法返回值或数据属性。

五、综合案例:封装表格组件

在实际项目中,封装表格组件是一个常见的需求。通过插槽,我们可以自定义表格的每一列,使其能够适应不同的数据类型和展示方式。

代码准备

根组件(APP.vue):

<template><div><MyTable :data="list1"><!-- 使用插槽 --><template #default="obj"><button @click="del(obj.row.id)">删除</button></template></MyTable><MyTable :data="list2"><template v-slot:default="{ row }"><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue';export default {data() {return {list1: [{ id: 1, name: '赵天明', age: 25 },{ id: 2, name: '李翔飞', age: 22 },{ id: 3, name: '吴国基', age: 24 }],list2: [{ id: 4, name: '王小明', age: 26 },{ id: 5, name: '张小丽', age: 23 },{ id: 6, name: '李大力', age: 27 }]};},methods: {del(id) {this.list1 = this.list1.filter(item => item.id !== id);},show(row) {alert(`姓名:${row.name}; 年龄:${row.age}`);}},components: {MyTable}
}
</script>

子组件(MyTable.vue)

<template><div class="my-table"><table><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead><tbody><tr v-for="row in data" :key="row.id"><td>{{ row.id }}</td><td>{{ row.name }}</td><td>{{ row.age }}</td><td><!-- 使用插槽来渲染操作列 --><slot :row="row"></slot></td></tr></tbody></table></div>
</template><script>
export default {name: 'MyTable',props: {data: {type: Array,required: true}}
}
</script><style scoped>
.my-table {width: 100%;border-collapse: collapse;
}.my-table th, .my-table td {border: 1px solid #ddd;padding: 8px;text-align: left;
}.my-table th {background-color: #f2f2f2;
}
</style>

综合案例解析

在这个综合案例中,我们封装了一个简单的表格组件MyTable,它接收一个data属性,该属性是一个对象数组,每个对象代表表格中的一行数据。MyTable组件内部使用v-for指令遍历data数组,并为每一行数据生成一个表格行(<tr>)。

在表格的最后一列(操作列),我们使用了插槽(<slot :row="row"></slot>),这样父组件就可以自定义这一列的内容。通过v-slot:default="{ row }"语法,父组件可以接收到子组件传递的每一行数据,并据此渲染相应的操作按钮或链接。

父组件中的使用

在父组件中,我们创建了两个数据列表list1list2,并分别将它们传递给两个MyTable组件实例。对于第一个MyTable组件实例,我们使用了一个带命名的插槽(虽然这里使用的是默认插槽,但命名插槽的语法类似),并通过@click事件监听器绑定了删除操作。对于第二个MyTable组件实例,我们使用了简写的插槽语法,并通过show方法实现了查看操作。

插槽的作用

在这个案例中,插槽的作用主要体现在以下几个方面:

  1. 提高组件的复用性:通过插槽,我们可以将表格的操作列留给父组件自定义,这样MyTable组件就可以适用于不同的场景,而无需修改组件本身的代码。

  2. 实现数据的灵活展示:父组件可以根据需要传递不同的数据给子组件,并通过插槽展示这些数据。在这个案例中,父组件通过插槽传递了删除和查看两个操作按钮,而这两个操作的具体实现则是由父组件控制的。

  3. 保持组件的简洁性:将复杂的展示逻辑放在父组件中处理,可以使子组件保持简洁和专注。在这个案例中,MyTable组件只负责渲染表格的基本结构,而具体的操作逻辑则留给父组件实现。

六、总结

插槽是Vue中一个非常强大的功能,它允许我们在子组件中定义插槽位置,并在父组件中填充这些内容。通过插槽,我们可以实现组件的高度自定义和复用性。在本文中,我们详细介绍了默认插槽、具名插槽和作用域插槽的基本用法,并通过一个综合案例展示了如何在实际项目中应用这些插槽类型来封装表格组件。希望这些内容能帮助你更好地理解和使用Vue中的插槽功能。

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

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

相关文章

爬虫获取的数据如何用于市场分析?

在数字化时代&#xff0c;数据已成为企业决策的重要资产。通过爬虫技术获取的数据可以为市场分析提供丰富的原材料。本文将探讨如何利用Python爬虫获取的数据进行市场分析&#xff0c;并提供代码示例。 1. 数据收集 首先&#xff0c;我们需要通过爬虫收集相关数据。以电商行业…

Linux高阶——1123—服务器基础服务器设备服务器基础能力

目录 1、服务器基础 1、服务器基本概述 2、服务器设计之初解决的问题 网络穿透 网络数据设备间的收发 3、服务器的类型C/S、B/S 2、服务器设备 将自己的服务器软件部署上线 3、代理服务器负载均衡&#xff0c;以及地址绑定方式 4、服务器的基础能力 1、服务器基础 1…

DICOM图像深入解析:为何部分DR/CR图像默认显示为反色?

概述 在数字医学影像处理中,CR(Computed Radiography,计算机放射摄影)和DR(Digital Radiography,数字放射摄影)技术广泛应用于医疗影像获取与分析。然而,临床实践中常常遇到这样一个问题:部分CR/DR图像在默认打开时呈现为反色(即负片效果),需手动反色后才能正常阅片…

公网弹性绑定负载均衡收费吗?

公网弹性绑定负载均衡收费吗&#xff1f;公网弹性绑定负载均衡&#xff08;ELB&#xff09;是收费的。费用主要包括公网IP费、带宽费和负载均衡实例费。其中&#xff0c;带宽费可以按固定带宽或实际使用流量计费&#xff0c;而实例费则根据类型、规格和使用时长来定价。此外&am…

【ArcGISPro】根据yaml构建原始Pro的conda环境

使用场景 我们不小心把原始arcgispro-py3的conda环境破坏了,我们就可以使用以下方法进行修复 查找文件 在arcgis目录下找到yaml文件 如果没找到请复制以下内容到新的yaml文件 channels: - esri - defaults dependencies: - anyio=4.2.0=py311haa95532_0 - appdirs=1.4.4=p…

多头数(head number);d_model、d_k;词嵌入维度之间的关系;多头是对不同维度的特征分开提取,意义在于将并行执行

目录 多头是对不同维度的特征分开提取,意义在于将并行执行 之后的每头提取的特征仅仅进行矩阵拼接 多头数(head number) d_model、d_k 词嵌入维度之间的关系 词嵌入的维度(d_model)决定了权重矩阵的形状 一、概念解释 二、关系举例说明 多头数,权重矩阵的长度和词…

【Google Cloud】Private Service Connect 托管式服务

简介 Private Service Connect 是什么 Private Service Connect 是 Google Cloud&#xff08;原名 GCP&#xff09;Virtual Private Cloud&#xff08;VPC&#xff09;的一项功能。 该功能主要用于以下两个场景&#xff1a; 使用私有 IP 访问 Google Cloud 的 API。将用户自…

【redis 】string类型详解

string类型详解 一、string类型的概念二、string类型的常用指令2.1 SET2.2 GET2.3 MSET2.4 MGET2.5 SETNX2.6 INCR2.7 INCRBY2.8 DECR2.9 DECRBY2.10 INCRBYFLOAT2.11 APPEND2.12 GETRANGE2.13 SETRANGE2.14 STRLEN 三、string类型的命令小结四、string类型的内部编码五、strin…

跨平台应用开发框架(1)----Qt(组件篇)

目录 1.Qt 1.Qt 的主要特点 2.Qt的使用场景 3.Qt的版本 2.QtSDK 1.Qt SDK 的组成部分 2.安装 Qt SDK 3.Qt SDK 的优势 3.Qt初识 1.快速上手 widget.cpp mian.cpp widget.h Helloworld.pro 2.对象树 3.坐标系 4.信号和槽 1. 信号和槽的基本概念 2. 信号和槽的…

Element UI 打包探索【2】

目录 第三个命令 第四个命令 第五个命令 第六个命令 第七个命令 cross-env BABEL_ENV babel 第八个命令 总结 书&#x1f4da;接上文Element UI 打包探索【1】我们继续来看 第三个命令 "lint": "eslint src/**/* test/**/* packages/**/* build/**/* …

JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)

目录 JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能&#xff0c;JS中排序算法的使用详解&#xff08;附实际应用代码&#xff09; 一、为什么要使用Array.sort() 二、Array.sort() 的使用与技巧 1、基础语法 2、返回值 3、…

丹摩 | 利用 CogVideoX 生成视频

声明&#xff1a;非广告&#xff0c;纯用户体验 1. CogVideoX CogVideoX 是智谱 AI 推出的一款极具创新性与突破性的视频生成产品。它在技术层面展现出诸多卓越特性&#xff0c;例如其采用的 Diffusion Transformer&#xff08;DiT&#xff09;架构奠定了强大的生成能力基础…

SAP开发语言ABAP常见面试问题及答案

一、基础概念问题 什么是SAP ABAP&#xff1f; SAP ABAP&#xff08;Advanced Business Application Programming&#xff09;是一种高级企业应用编程语言&#xff0c;用于开发SAP系统中的应用程序。它主要用于定制和扩展SAP的标准功能&#xff0c;以满足企业特定的业务需求。例…

C# 读取多条数据记录导出到 Word标签模板之图片输出改造

目录 应用需求 设计 范例运行环境 配置Office DCOM 实现代码 组件库引入 ​核心代码 调用示例 小结 应用需求 在我的文章《C# 读取多条数据记录导出到 Word 标签模板》里&#xff0c;讲述读取多条数据记录结合 WORD 标签模板输出文件的功能&#xff0c;原有输出图片的…

『 Linux 』网络层 - IP协议 (二)

文章目录 路由NAT技术分片与组装分片的组装IP协议分片的短板 路由 通常情况路由器具备了一个非常重要的功能,即构建子网; 同时路由器需要实现跨网络通信,说明路由器必须存在两个或以上的IP地址,通常在路由器中可以看到几个接口,分别是一个WAN口和几个LAN口; WAN口IP被称为公网I…

使用 OpenCV 进行视频中的行人检测

在计算机视觉领域&#xff0c;行人检测是一个重要的研究方向&#xff0c;它在视频监控、自动驾驶、人机交互等领域都有着广泛的应用。本文将介绍如何使用 OpenCV 库来实现视频中的行人检测。 环境准备 首先&#xff0c;我们需要安装 OpenCV 库。可以通过以下命令来安装&#…

javaEE初阶——多线程(1)

文章目录 一些背景知识操作系统&#xff08;OS&#xff09;&#xff08;计算机的大管家&#xff09;操作系统的基本概念&#xff1a;市面上常见的操作操作系统&#xff1a; 关于前端与后端的介绍&#xff1a;&#xff08;针对服务的体系架构&#xff09;计算机是如何工作的&…

Apple Vision Pro开发003-PolySpatial2.0新建项目

unity6.0下载链接:Unity 实时开发平台 | 3D、2D、VR 和 AR 引擎 一、新建项目 二、导入开发包 com.unity.polyspatial.visionos 输入版本号 2.0.4 com.unity.polyspatial&#xff08;单独导入&#xff09;&#xff0c;或者直接安装 三、对应设置 其他的操作与之前的版本相同…

学习threejs,使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…

Python办公自动化案例:将演示文稿批量导出为图片和PDF文件

案例:将演示文稿批量导出为图片和PDF文件 准备资料:准备好PPT,并起好名称,放在同一目录下。 批量的将ppt,pptx转换为pdf和图片,代码如下: import comtypes.client import osdef init_powerpoint():powerp