实现一个作用域插槽的场景

vue项目中,插槽slot有三种分别是:默认插槽、具名插槽、作用域插槽。默认插槽和具名插槽在平时的开发中用的比较多,作用域插槽用的相对较少,以前我对作用域插槽不是很理解,现在理解了一下。下面通过代码来实现一个作用域插槽的使用场景。欢迎指正。

第一步先创建一个子组件

<template><div class="child-box"><divclass="child-list"v-for="(item, index) in items":key="index"ref="items"@click="childClick(item, index)"><slot  // 通过循环,插槽可以拿到每个列表项的数据name="item":item="item":items="items":index="index">{{ item.label }}</slot></div></div>
</template><script>export default {name:'child',props: {items:{type:Array,default:()=>{ [] }}},data() {return {}}}
</script>

第二步写个父组件,并且在父组件中使用子组件

<template><div><Child :items="items"><template slot="item" slot-scope="{ item }"><div class="navigation-item"><el-icon name="item.icon"></el-icon><div class="navigation-item-title"><span v-text="item.label"></span></div></div></template></Child></div>
</template>
<script>export default {name:'parent',data() {return {items:[{name:1,label:'消息',icon:'message'},{name:2,label:'待办',icon:'dealt'},{name:3,label:'工作台',icon:'workbanch'},{name:4,label:'动态',icon:'dynamic'},]}}}
</script>

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

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

相关文章

QLabel的setPixmap和setPicture有什么不同,请详细讲解

QLabel类提供了一个方便的方式来显示文本和图像。在Qt中&#xff0c;QLabel的setPixmap()和setPicture()方法都可以用来在标签中显示图像&#xff0c;但它们之间存在一些关键的区别&#xff0c;主要体现在它们接受的参数类型和用途上。 setPixmap() 参数类型&#xff1a;setP…

Linux系统之部署复古游戏平台

Linux系统之部署复古游戏平台 前言一、项目介绍1.1 项目简介1.2 项目特点1.3 游戏平台介绍二、本次实践介绍二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 安装Docker环境3.2 检查Docker服务状态3.3 检查Docker版本3.4 检查docker compose 版本四、构建…

RISC-V架构学习资料整理

1、韦东山——D1S哪吒开发板的裸机代码仓库 https://github.com/bigmagic123/d1-nezha-baremeta 2、melis系统移植到D1S https://blog.51cto.com/u_13800193/6268813 3、韦东山的gitee仓库 https://gitee.com/weidongshan 4、D1S编译工具链下载 https://github.com/Tina-Linux/…

ModbusTcp协议

Modbus TCP是一种通信协议,用于工业设备之间的通信。它是Modbus协议家族中的一个成员,最初是为串行通信设计的,但后来扩展到了TCP/IP网络。Modbus TCP/IP是一种公开的标准,由Modbus组织制定,并且被广泛应用于工业自动化和楼宇自动化领域。 Modbus TCP的主要特点: 基于TC…

LabVIEW管道缺陷智能检测系统

LabVIEW管道缺陷智能检测系统 管道作为一种重要的输送手段&#xff0c;其安全运行状态对生产生活至关重要。然而&#xff0c;随着时间的推移和环境的影响&#xff0c;管道可能会出现老化、锈蚀、裂缝等多种缺陷&#xff0c;这些缺陷若不及时发现和处理&#xff0c;将严重威胁到…

Java将File转换为MultipartFile

MultipartFile 是 Java 中用于处理 HTTP 文件上传的一个接口。它通常与 Spring 框架一起使用&#xff0c;特别是在 Spring MVC 中&#xff0c;用于处理 multipart/form-data 类型的 HTTP 请求。当用户在网页表单中选择并上传文件时&#xff0c;服务器端的控制器方法可能会接收一…

ProxySQL实现mysql8主从同步读写分离

ProxySQL基本介绍 ProxySQL是 MySQL 的高性能、高可用性、协议感知代理。以下为结合主从复制对ProxySQL读写分离、黑白名单、路由规则等做些基本测试。 先简单介绍下ProxySQL及其功能和配置&#xff0c;主要包括&#xff1a; 最基本的读/写分离&#xff0c;且方式有多种&…

python基础训练-for循环

适应人群&#xff1a;学习python大概在10-20天&#xff0c;比较勤于动手的同学&#xff0c;比较混沌的新手可以手敲一遍下面这些for循环&#xff0c;在AI时代只有脑子智能&#xff0c;手不生疏&#xff0c;多多运用AI进行语义编程&#xff0c;看懂代码&#xff0c;通过openai教…

Java递归生成本地文件目录树形结构

Java递归生成本地文件目录(树行结构) 1.读取txt文件保存的文件目录结构 2.递归生成本地文件目录树形结构&#xff0c;并修改目录文件前缀进行递增 3.结果截图 4.代码 package com.zfi.server.device;import io.swagger.annotations.Api; import org.springframework.web.bind…

Postman接口测试—配置token为全局变量,配置测试环境

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 为什么要进行接口测试 因为不同端&#xff08;前段&#xff0c;后端&#xff09;的工作进度不一…

仿牛客网项目---关注模块的实现

本篇文章是关于我的项目的关注模块的开发。 关注模块的开发实现了用户之间的关注功能和关注列表的展示。通过使用相应的服务类处理关注和取消关注操作&#xff0c;并利用用户服务类获取用户信息&#xff0c;实现了关注功能的存储和查询。同时&#xff0c;通过触发关注事件&…

【软考】设计模式之访问者模式

目录 1. 说明2. 应用场景3. 结构图4. 构成5. java示例5.1 喂动物5.1.1 抽象访问者5.1.2 具体访问者5.1.3 抽象元素5.1.4 具体元素5.1.5 对象结构5.1.6 客户端类5.1.7 结果示例 5.2 超市销售系统5.2.1 业务场景5.2.2 业务需求类图5.2.3 抽象访问者5.2.4 具体访问者5.2.5 抽象元素…

前端面试拼图-原理源码

摘要&#xff1a;最近&#xff0c;看了下慕课2周刷完n道面试题&#xff0c;记录下... 1. JS内存泄漏如何检测&#xff1f;场景有哪些? 1.1 垃圾回收 GC 垃圾回收是一种自动管理内存的机制&#xff0c;它负责在运行时跟踪内存的分配和使用情况&#xff0c;并在不再需要的对象…

理解CAE

用于自监督表示学习的上下文自动编码器 摘要 我们提出了一种新的掩模图像建模(MIM)方法&#xff0c;上下文自编码器(CAE)&#xff0c;用于自监督表示预训练。我们通过在编码的表示空间中进行预测来预训练编码器。预训练任务包括两个任务:掩模表示预测—预测掩模块的表示&…

专业145+总分410+西工大西北工业大学827信号与系统考研经验电子信息与通信工程,海航,真题,大纲,参考书。

经过一年的努力&#xff0c;分数终于出来。今年专业课827信号与系统145&#xff08;很遗憾差了一点点满分&#xff0c;没有达到Jenny老师的最高要求&#xff09;&#xff0c;数一130&#xff0c;英语和政治也都比较平衡&#xff0c;总分410分&#xff0c;当然和信息通信考研Jen…

C及C++每日练习(2)

1.选择&#xff1a; 1.使用printf函数打印一个double类型的数据&#xff0c;要求&#xff1a;输出为10进制&#xff0c;输出左对齐30个字符&#xff0c;4位精度。以下哪个选项是正确的&#xff1f; A.%-30.4e B.%4.30e C.%-30.4f D.%-4.30 在上一篇文章中&#xff0c;提到了…

变老特效哪个app可以拍?深入探索变老效果的应用

随着科技的进步和智能手机的普及&#xff0c;各种摄影应用如雨后春笋般涌现&#xff0c;为我们提供了前所未有的创意拍摄体验。其中&#xff0c;变老特效因其独特的魅力&#xff0c;吸引了众多用户的关注。这种特效能够让我们在短时间内看到自己老去的模样&#xff0c;既有趣又…

JavaWeb HTTP 请求头、请求体、响应头、响应体、响应状态码

J2EE&#xff08;Java 2 Platform Enterprise Edition&#xff09;是指“Java 2企业版”&#xff0c;B/S模式开发Web应用就是J2EE最核心的功能。 Web是全球广域网&#xff0c;也称为万维网(www)&#xff0c;能够通过浏览器访问的网站。 在日常的生活中&#xff0c;经常会使用…

强大的ps 命令 -o 自定义输出内容选项

强大的ps 命令 -o 自定义输出内容选项 1、ps命令介绍和作用2、问题描述 1、ps命令介绍和作用 ps 是一个 Unix 和类 Unix 操作系统中常用的命令&#xff0c;用于显示当前运行的进程信息。ps 命令的作用包括&#xff1a; 查看进程信息&#xff1a; ps 命令可以列出当前系统中正…

力扣每日一题:Dijkstra1976.到达目的地的方案数

本题是在非负权值图中求解最短路径&#xff0c;典型的Dijkstra算法的应用&#xff0c;只不过在求解最短路径时&#xff0c;还需要记录最短路径数目。这个又涉及到一点动态规划的思想。 考虑一个点u&#xff0c;原点到u的最短路径为dis[u]&#xff0c;最短路径数目为ways[u]&…