当前位置: 首页 > news >正文

【Vue】Vue3.0(二十五)Vue3.0中的具名插槽 的概念和使用场景

上篇文章 【Vue】Vue3.0(二十四)Vue3.0中 r e f s 、 refs 、 refsparent 的概念和使用场景

🏡作者主页:点击!

🤖Vue专栏:点击!

⏰️创作时间:2024年11月20日16点30分

文章目录

      • 概念
      • 使用场景
      • 使用示例
      • 再来个实例

概念

在Vue 3.0中,具名插槽是插槽的一种特殊形式,它允许父组件向子组件的特定位置插入内容,通过给插槽命名来实现更精确的内容分发。与默认插槽不同,具名插槽可以在一个子组件中定义多个不同名称的插槽,父组件根据这些名称将相应的内容插入到对应的位置,从而使子组件的结构更加灵活和可定制。

使用场景

  • 复杂组件的内容定制:当一个组件的内部结构较为复杂,不同部分需要由父组件根据具体业务场景提供不同内容时,具名插槽就非常有用。比如一个包含导航栏、主体内容区和侧边栏的页面布局组件,通过具名插槽,父组件可以分别向这三个区域插入不同的导航链接、具体的页面内容和侧边栏信息,实现页面布局和内容的灵活组合。
  • 组件库的开发:在开发组件库时,具名插槽可以让使用者更方便地对组件进行个性化定制。例如,一个通用的卡片组件,可能有标题、内容、操作按钮等不同的区域,通过具名插槽,使用者可以根据自己的需求向这些区域插入不同的文本、图标或按钮等内容,而无需修改组件库的源代码,提高了组件的复用性和灵活性。

使用示例

以下是一个使用具名插槽的示例,包含一个Card组件和使用该组件的父组件:

  • Card组件
<template><div class="card"><div class="card-header"><slot name="header"></slot></div><div class="card-body"><slot name="body"></slot></div><div class="card-footer"><slot name="footer"></slot></div></div>
</template><script setup lang="ts">
import { defineComponent } from 'vue';export default defineComponent({});
</script><style scoped>
.card {border: 1px solid #ccc;border-radius: 5px;overflow: hidden;
}.card-header {background-color: #f0f0f0;padding: 10px;font-weight: bold;
}.card-body {padding: 10px;
}.card-footer {background-color: #f0f0f0;padding: 10px;text-align: right;
}
</style>

Card组件中,定义了三个具名插槽:headerbodyfooter,分别用于显示卡片的头部、主体和底部内容。

  • 父组件使用Card组件
<template><div><h2>具名插槽示例</h2><Card><template v-slot:header><span>这是卡片的标题</span></template><template v-slot:body><p>这是卡片的主体内容,这里可以填写详细的信息。</p></template><template v-slot:footer><button>查看详情</button></template></Card></div>
</template><script setup lang="ts">
import Card from './Card.vue';
import { defineComponent } from 'vue';export default defineComponent({components: {Card,},
});
</script>

在父组件中,通过<template v-slot:header><template v-slot:body><template v-slot:footer>分别向Card组件的对应具名插槽中插入了自定义的内容,如标题、主体内容和操作按钮。这样,就可以根据不同的需求,灵活地定制Card组件的显示内容,而无需修改Card组件本身的代码,实现了组件的高度复用和灵活定制。

通过具名插槽,Vue 3.0的组件能够更好地满足各种复杂的页面布局和内容定制需求,提高了代码的可维护性和复用性,使开发者能够更高效地构建应用程序。

再来个实例

最终效果:
在这里插入图片描述
代码:
Father.vue

<template><div class="father"><h3>父组件</h3><div class="content"><Category><template v-slot:s2><ul><liv-for="g in games":key="g.id">{{ g.name }}</li></ul></template><template v-slot:s1><h2>热门游戏列表</h2></template></Category><Category><template v-slot:s2><img:src="imgUrl"alt=""></template><template v-slot:s1><h2>今日美食城市</h2></template></Category><Category><!--简写:#s2--><template #s2><videovideo:src="videoUrl"controls></video></template><template #s1><h2>今日影视推荐</h2></template></Category></div></div>
</template><script setup lang="ts" name="Father">
import Category from './Category.vue'
import { ref, reactive } from "vue";let games = reactive([{ id: 'asgytdfats01', name: '英雄联盟' },{ id: 'asgytdfats02', name: '王者农药' },{ id: 'asgytdfats03', name: '红色警戒' },{ id: 'asgytdfats04', name: '斗罗大陆' }
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>
.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;
}.content {display: flex;justify-content: space-evenly;
}img,
video {width: 100%;
}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;
}
</style>

Category.vue代码

<template><div class="category"><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot></div>
</template><script setup lang="ts" name="Category"></script><style scoped>
.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;
}
</style>

相关文章:

【Vue】Vue3.0(二十五)Vue3.0中的具名插槽 的概念和使用场景

上篇文章 【Vue】Vue3.0&#xff08;二十四&#xff09;Vue3.0中 r e f s 、 refs 、 refs、parent 的概念和使用场景 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月20日16点30分 …...

【pytorch-02】:张量的索引、形状操作和常见运算函数

文章目录 1 张量索引1.1 简单行列索引和列表索引1.2 布尔索引和多维索引 2 张量的形状操作2.1 reshape函数2.2 transpose和permute函数的使用2.3 view和contiguous函数2.4 squeeze和unsqueeze函数用法2.5 张量更改形状小结 3 常见运算函数 1 张量索引 1.1 简单行列索引和列表索…...

C语言-指针作为函数返回值及二级指针

1、指针作为函数返回值 c语言允许函数的返回值是一个指针&#xff08;地址&#xff09;我们将这样的函数称为指针函数&#xff0c;下面的例子定义一了一个函数strlong&#xff08;&#xff09;&#xff0c;用来返回两个字符串中较长的一个&#xff1a; 1. #include <stdio…...

css 使用图片作为元素边框

先看原始图片 再看效果 边框的四个角灭有拉伸变形,但是图片的中部是拉伸的 代码 border-style: solid;/* 设置边框图像的来源 */border-image-source: url(/static/images/mmwz/index/bk_hd3x.png);/* 设置如何切割图像 */border-image-slice: 66;/* 设置边框的宽度 */border…...

Linux无sudo权限将zsh作为默认shell

由于我只有用户权限&#xff0c;没有sudo权限&#xff0c;将zsh作为用户默认shell需要密码&#xff0c;所以没法在系统层面进行操作&#xff0c;下面另寻他法。 安装zsh 可以根据网上教程去安装zsh&#xff0c;一般电脑上会带有zsh&#xff0c;可以使用下述命令查看是否安装z…...

【React 进阶】掌握 React18 全部 Hooks

一、数据更新驱动 1. useState 1. 基础介绍 useState主要用于声明和操作状态变量&#xff0c;可以使函数组件像类组件一样拥有state const [state, setState] useState(initialState);state&#xff1a;状态&#xff0c;作为渲染视图的数据源 setState&#xff1a;改变st…...

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter)

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现&#xff08;Kalman Filter&#xff09; 更新以gitee为准&#xff1a; 文章目录 数据预测概念和适用方式线性系统的适用性 数据预测算法和卡尔曼滤波公式推导状态空间方程和观测器先验估计后验估计…...

【SQL50】day 2

目录 1.每位经理的下属员工数量 2.员工的直属部门 3.判断三角形 4.上级经理已离职的公司员工 5.换座位 6.电影评分 7.修复表中的名字 8.患某种疾病的患者 9.删除重复的电子邮箱 1.每位经理的下属员工数量 # Write your MySQL query statement below #e1是经理&#xff0c;…...

【内存管理】理解 `WeakReference` 以更好地管理 Android 应用中的内存

在 Android 应用开发中&#xff0c;内存管理至关重要。糟糕的内存管理可能导致“内存泄漏”&#xff0c;即一些不再需要的对象仍然留在内存中&#xff0c;最终导致性能下降&#xff0c;甚至应用崩溃。WeakReference 就是帮助解决这个问题的一种工具。在本文中&#xff0c;我们将…...

解决IDEA中Maven管理界面不是层级结构的问题

文章目录 0. 前言1. 点击Maven管理界面右上角的三个点2. 勾选将模块分组3. 分组后的层级结构 更多 IDEA 的使用技巧可查看 IDEA 专栏中的文章&#xff1a;IDEA 0. 前言 在 IDEA 中&#xff0c;如果项目中有很多子模块&#xff0c;每个子模块中又有一个或多个子模块时&#xf…...

Linux运维篇-iscsi存储搭建

目录 概念实验介绍环境准备存储端软件安装使用targetcli来管理iSCSI共享存储 客户端软件安装连接存储 概念 iSCSI是一种在Internet协议上&#xff0c;特别是以太网上进行数据块传输的标准&#xff0c;它是一种基于IP Storage理论的存储技术&#xff0c;该技术是将存储行业广泛…...

深度学习基础练习:代码复现transformer重难点

2024/11/10-2024/11/18: 主要对transformer一些比较难理解的点做了一些整理&#xff0c;希望对读者有所帮助。 前置知识&#xff1a; 深度学习基础练习&#xff1a;从pytorch API出发复现LSTM与LSTMP-CSDN博客 【神经网络】学习笔记十四——Seq2Seq模型-CSDN博客 【官方双语】一…...

141. Sprite标签(Canvas作为贴图)

上节课案例创建标签的方式&#xff0c;是把一张图片作为Sprite精灵模型的颜色贴图,本节给大家演示把Canvas画布作为Sprite精灵模型的颜色贴图&#xff0c;实现一个标签。 注意&#xff1a;本节课主要是技术方案讲解&#xff0c;默认你有Canvas基础&#xff0c;如果没有Canvas基…...

【IDEA】解决总是自动导入全部类(.*)问题

文章目录 问题描述解决方法 我是一名立志把细节说清楚的博主&#xff0c;欢迎【关注】&#x1f389; ~ 原创不易&#xff0c; 如果有帮助 &#xff0c;记得【点赞】【收藏】 哦~ ❥(^_-)~ 如有错误、疑惑&#xff0c;欢迎【评论】指正探讨&#xff0c;我会尽可能第一时间回复…...

python中的OS模块的基本使用

&#x1f389;&#x1f389;&#x1f389;欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!&#x1f64f;&#x1f64f;&#x1f64f; 文章目录…...

【Qt】QComboBox设置默认显示为空

需求 使用QComboBox&#xff0c;遇到一个小需求是&#xff0c;想要设置未点击出下拉列表时&#xff0c;内容显示为空。并且不想在下拉列表中添加一个空条目。 实现 使用setPlaceholderText()接口。我们先来看下帮助文档&#xff1a; 这里说的是&#xff0c;placeholderText是…...

LeetCode - #139 单词拆分

文章目录 前言摘要1. 描述2. 示例3. 答案题解动态规划的思路代码实现代码解析1. **将 wordDict 转换为 Set**2. **初始化 DP 数组**3. **状态转移方程**4. **返回结果** **测试用例**示例 1:示例 2:示例 3: 时间复杂度空间复杂度总结关于我们 前言 本题由于没有合适答案为以往遗…...

服务器作业4

[rootlocalhost ~]# vim 11.sh #关闭防火墙 systemctl stop firewalld setenforce 0 #1.接收用户部署的服务名称 read -p "服务名称:(nginx)" server_name if [ $server_name ! nginx ];then echo "输入的不是nginx,脚本退出" exit 1 fi # 判断是…...

IOC控制反转---相关的介绍和6大注解解读(类注解+方法注解)

文章目录 1.传统方式造车2.传统方法的弊端3.IOC的引入3.IOC对于图书管理系统进行改进&#xff08;初识&#xff09;4.注解的使用说明4.1controller注解4.2service注解4.3component注解4.4关于spring命名的问题4.5component重命名4.6repository注解4.7configuration注解4.8注解之…...

SpringBoot(8)-任务

目录 一、异步任务 二、定时任务 三、邮件任务 一、异步任务 使用场景&#xff1a;后端发送邮件需要时间&#xff0c;前端若响应不动会导致体验感不佳&#xff0c;一般会采用多线程的方式去处理这些任务&#xff0c;但每次都需要自己去手动编写多线程来实现 1、编写servic…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...