vue插槽slots

一、默认插槽:

vue组件能够接收任意类型的 JavaScript 值作为 props,也可以为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。

例如:有一个<FancyButton>组件


在父组件中引用


最终渲染出来的dom

插槽内容可以是任意合法的模板内容,不局限于文本,还可以传入多个元素甚至是组件,插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的,但插槽内容无法访问子组件的数据。

二、具名插槽:

<slot> 元素可以有一个特殊的 attribute name,用来给各个插槽分配唯一的 ID,以确定每一处要渲染的内容,这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”。

要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令,v-slot 有对应的简写 #,因此 <template v-slot:header> 可以简写为 <template #header> 

三、作用域插槽:

插槽的内容无法访问到子组件的状态,然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据,需要一种方法来让子组件在渲染时将一部分数据提供给插槽,向一个插槽的出口上传递

默认插槽如何接受 props,通过子组件标签上的 v-slot 指令,直接接收到了一个插槽 props 对象

也可以在 v-slot 中使用解构

具名作用域插槽的工作方式也是类似的,插槽 props 可以作为 v-slot 指令的值被访问到:v-slot:name="slotProps",缩写为

 

 

 

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

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

相关文章

配置中心替换测试设计分享

一、背景 项目后端服务开始一直使用Apollo配置中心(携程开发)进行配置管理&#xff0c;由于公司自研了配置中心B&#xff0c;为了后续方便管理和降本增效&#xff0c;后端服务使用的配置需要由Apollo配置中心切换到自研配置中心B。后续不再使用Apollo配置。 替换前架构&#x…

刷新缓冲区(标准IO)

标准IO是带缓冲的&#xff0c;输入和输出函数属于行缓冲&#xff0c;stdin、stdin、printf、scanf 1.换行符刷新 2.缓冲区满刷新 3.fflush函数强制刷新 4.程序正常结束

【云原生】K8S集群

目录 一、调度约束1.1 POT的创建过程1.1调度过程 二、指定节点调度2.1 通过标签选择节点 三、亲和性3.1requiredDuringSchedulingIgnoredDuringExecution&#xff1a;硬策略3.1 preferredDuringSchedulingIgnoredDuringExecution&#xff1a;软策略3.3Pod亲和性与反亲和性3.4使…

【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式 代码&#xff1a; <style> p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip; }p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;ove…

Android侧滑栏(一)可缩放可一起移动的侧滑栏

在实际的各类App开发中&#xff0c;经常会需要做一个左侧的侧滑栏&#xff0c;类似于QQ这种。 今天这篇文章总结下自己在开发中遇到的这类可以跟随移动且可以缩放的侧滑栏。 一、实现原理 使用 HorizontalScrollView 实现一个水平方向的可滑动的View&#xff0c;左布局为侧滑…

arcgis pro 3.0.2 安装及 geemap

arcgis pro 3.0.2 安装及 geemap arcgis pro 3.0.2 安装 arcgis pro 3 版本已经很多了&#xff0c;在网上找到资源就可以进行安装 需要注意的是&#xff1a;有的文件破解文件缺少&#xff0c;导致破解不成功。 能够新建地图就是成功了&#xff01; geemap安装 1.需要进行环…

VsCode美化 - VsCode自定义 - VsCode自定义背景图

VsCode美化 - VsCode自定义 - VsCode自定义背景图&#xff1a;添加二次元老婆图到VsCode 前言 作为一个二刺螈&#xff0c;VsCode用久了&#xff0c;总觉得少了些什么。是啊&#xff0c;高效的代码生产工具中怎么能没有老婆呢&#xff1f; 那就安装一个VsCode插件把老婆添加…

Byzer-LLM环境安装

1.Byzer-LLM简介 Byzer-LLM 是基于 Byzer 的一个扩展&#xff0c;让用户可以端到端的完成业务数据获取&#xff0c;处理&#xff0c;finetune大模型&#xff0c;多场景部署大模型等全流程。 该扩展的目标也是为了让企业更好的将业务数据注入到私有大模型&#xff08;开源或者商…

学生公寓一进四出智能电表的功能介绍

学生公寓一进四出智能电表石家庄光大远通电气有限公司模块时间控制功能&#xff1a;可设定每个宿舍自动断电和供电的时间&#xff1b;也可以设定某时间段内为小功率输出,设定时间后自动恢复正常供电。权限管理&#xff1a;管理者可对操作人员设定不同操作权限&#xff1b; 软件…

Android T 窗口层级其一 —— 容器类

窗口在App端是以PhoneWindow的形式存在&#xff0c;承载了一个Activity的View层级结构。这里我们探讨一下WMS端窗口的形式。 可以通过adb shell dumpsys activity containers 来看窗口显示的层级 窗口容器类 —— WindowContainer类 /*** Defines common functionality for c…

Linux下 时间戳的转化

Linux下一般用date 记录当前时间&#xff0c;尤其是我们需要保存测试log的时候&#xff0c;或者设计一个跑多长时间的脚本都需要时间戳。下面看一下平时最常用的几种写法 1 date “%Y-%m-%d %H:%M” 显示具体时间 2 修改时间 date -s 3 date %s :当前时间的时间戳 显示具体时…

去了字节跳动,才知道年薪40W的测试有这么多?

今年大环境不好&#xff0c;内卷的厉害&#xff0c;薪资待遇好的工作机会更是难得。最近脉脉职言区有一条讨论火了 哪家互联网公司薪资最‘厉害’&#xff1f; 下面的评论多为字节跳动&#xff0c;还炸出了很多年薪40W的测试工程师 我只想问一句&#xff0c;现在的测试都这么有…

Opencv-C++笔记 (16) : 几何变换 (图像的翻转(镜像),平移,旋转,仿射,透视变换)

文章目录 一、图像平移二、图像旋转2.1 求旋转矩阵2.2 求旋转后图像的尺寸2.3手工实现图像旋转2.4 opencv函数实现图像旋转 三、图像翻转3.1左右翻转3.2、上下翻转3.3 上下颠倒&#xff0c;左右相反 4、错切变换4.1 实现错切变换 5、仿射变换5.1 求解仿射变换5.2 OpenCV实现仿射…

Floyd算法

正如我们所知道的&#xff0c;Floyd算法用于求最短路径。Floyd算法可以说是Warshall算法的扩展&#xff0c;三个for循环就可以解决问题&#xff0c;所以它的时间复杂度为O(n^3)。 Floyd算法的基本思想如下&#xff1a;从任意节点A到任意节点B的最短路径不外乎2种可能&#xff…

SpringCloud实用篇2——Nacos配置管理 Feign远程调用 Gateway服务网关

目录 1 Nacos配置管理1.1 统一配置管理1.1.1 在nacos中添加配置文件1.1.2 从微服务拉取配置 1.2 配置热更新1.2.1 方式一1.2.2 方式二&#xff08;推荐&#xff09; 1.3.配置共享 2 搭建Nacos集群2.1 集群结构图2.2 搭建集群2.2.1 初始化数据库2.2.2 下载nacos2.2.3 配置Nacos2…

JavaSE 【类和对象】(3)(重点:内部类)

一、内部类 将一个类定义在另一个类或者一个方法的内部&#xff0c; 前者称为内部类&#xff0c;后者称为外部类 。内部类也是封装的一种体现 在外部类中&#xff0c;内部类定义位置与外部类成员所处的位置相同&#xff0c;因此称为成员内部类。 public class OutClass { c…

分布式异步任务处理组件(八)

分布式异步任务组件网络通信线程模型设计-- 大概说一下功能场景&#xff1a; 从节点和主节点建立连接&#xff0c;负责和主节点的网络IO通信&#xff0c;通信动作包括投票&#xff0c;心跳&#xff0c;举证等&#xff0c;步骤为读取主节点的信息&#xff0c;写入IO队列中&…

15.3.2 【Linux】系统的配置文件:/etc/crontab,/etc/cron.d/*

这个“ crontab -e ”是针对使用者的 cron 来设计的&#xff0c;如果是“系统的例行性任务”时&#xff0c; 该怎么办呢&#xff1f;是否还是需要以 crontab -e 来管理你的例行性工作调度呢&#xff1f;当然不需要&#xff0c;你只要编辑/etc/crontab 这个文件就可以。有一点需…

Prometheus技术文档-基本使用-配置文件全解!!!!!

简介&#xff1a; Prometheus是一个开源的系统监控和告警系统&#xff0c;由Google的BorgMon监控系统发展而来。它主要用于监控和度量各种时间序列数据&#xff0c;比如系统性能、网络延迟、应用程序错误等。Prometheus通过采集监控数据并存储在时间序列数据库中&#xff0c;…

【SpringBoot】日志是什么+基于lombok的日志输出

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 在我们日常的程序开发中&#xff0c;日志是程序的重要组成部分&#xff0c;想象⼀下&#xff0c;如果程序报错了&#xff0c;不让你打开控制台看⽇志&#xff0c;那么你能找到报错的原因吗…