VUE之---slot插槽
什么是插槽
slot 【插槽】, 是 Vue 的内容分发机制, 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot 是子组件的一个模板标签元素, 而这一个标签元素是否显示, 以及怎么显示是由父组件决定的。
VUE中slot【插槽】的分类与应用
插槽有三种:默认插槽、具名插槽、作用域插槽。
(1)默认插槽
语法:<slot></slot>
示例:
在子组件中定义一个默认插槽
<template><div><h2>{{ title }}</h2><slot></slot></div>
</template>
在开发中我们经常使用到组件之间的传值,但很多情况涉及到的都是数据属性的传值,现在如果是这种情况:想让父组件定义的 p 标签传给子组件并显示,可以在子组件中定义一个默认插槽
<template><div class="about"><h1>This is an Parent page</h1><children><!-- 一个p标签的dom结构 --><p>子组件标签之间</p></children></div>
</template><script>
import Children from './Children.vue'
export default {components: {Children},data () {return {}}
}
</script>
展示效果

(2)具名卡槽
在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将根据 name 来填充对应的内容。这种有name属性的卡槽就是具名卡槽。
为具名插槽提供内容:
在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式指定元素需要放在哪个插槽中。
【语法】<template v-slot:插槽的name> 需要向插槽中放入的内容 </template>
具名插槽的简写形式:
跟 v-on 和 v-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header
【语法】<template #插槽的name> 需要向插槽中放入的内容 </template>
【注】
- 使用 v-slot 指令指定元素放在哪个插槽中,必须配合
<template>元素,且一个<template>元素只能对应一个预留的插槽,即不能多个<template>元素都使用 v-slot 指令指定相同的插槽。 - 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。
- 使用 slot 属性指定元素放置的插槽:slot="插槽的name",slot 属性可以直接写在元素标签上,即 slot 属性不用必须与<template> 元素配合,且不同的标签可以使用 slot 属性指定相同的插槽,使用 slot 属性指定了相同的插槽都会被放入一个插槽中,后面的元素会被追加在前面放入插槽的元素后。
示例:
在子组件中,定义两个具名插槽:
<template><div><h3>Com 组件</h3><slot name="header"></slot><slot name="bottom"></slot></div>
</template><script>
export default {name: 'Com'
}
</script>
父组件示例代码
<template><div><h1>App 组件</h1><Com><!-- 指定需要向子组件的插槽区域放入的元素 --><!-- 需要放入插槽的元素写在组件标签内 --><!-- <div>插槽的内容</div> --><template v-slot:header><div>头部区域</div></template><template v-slot:default><div>默认区域</div></template><template v-slot:bottom><div>bottom区域</div></template></Com></div>
</template>
<script>
import Com from './Com.vue'
export default {name: 'App',components: { Com }
}
</script>
(3)作用域插槽
在封装组件的过程中,可以为预留的<slot> 插槽绑定 props 数据,这种带有 props 数据的<slot> 叫做“作用域插槽”。
作用域插槽,要显示的数据已经在组件中,以什么样的样式显示数据(用什么标签和标签的样式),可以由组件的使用者进行指定
【语法】<slot :自定义的name=data中的属性或对象></slot>
注:为作用域插槽指定插槽内的元素必须使用 <template> 标签。
获取插槽绑定 props 数据的方法:
1.scope="接收的变量名":<template scope="接收的变量名">
2.slot-scope="接收的变量名":<template slot-scope="接收的变量名">
3.v-slot:插槽名="接收的变量名":<template v-slot:插槽名="接收的变量名">
子组件示例
<template><div><h3>Com 组件</h3><!-- 为组件的使用者预留的区域 --><!-- :infomation="info" 未来要进行渲染在插槽位置的数据 --><!-- 怎么样渲染数据由组件的使用者决定 --><slot :infomation="info" :msg="msg"></slot></div>
</template><script>
export default {name: 'Com',data() {return {info: { name: 'zs', age: 23 },msg: 'hello vue'}}
}
</script>
父组件示例
<template><div><h1>App 组件</h1><Com><!-- 指定需要向子组件的插槽区域放入的元素 --><!-- 需要放入插槽的元素写在组件标签内 --><!-- val 接收组件中要在插槽位置渲染的数据 --><!-- val 组件通过 props 向插槽中传入的数据 --><template #default="val"> {{ val }} </template></Com></div>
</template><script>
import Com from './Com.vue'export default {name: 'App',components: { Com }
}
</script>
此文章借鉴了一下博主的优秀文章:
原文链接
相关文章:
VUE之---slot插槽
什么是插槽 slot 【插槽】, 是 Vue 的内容分发机制, 组件内部的模板引擎使用slot 元素作为承载分发内容的出口。slot 是子组件的一个模板标签元素, 而这一个标签元素是否显示, 以及怎么显示是由父组件决定的。 VUE中slot【插槽】…...
linux、windows、macos,命令终端清屏
文章目录 LinuxWindowsmacOS 在Linux、Windows和macOS的命令终端中,清屏的命令或方法各不相同。以下是针对这三种系统的清屏方法: Linux clear命令:这是最常用的清空终端屏幕的命令之一。在终端中输入clear命令后,屏幕上的所有内容…...
【RaspberryPi】树莓派Matlab/Simulink支持包安装与使用
官网支持与兼容性 Raspberry Pi Support from MATLAB - Hardware Support - MATLAB & Simulink Raspberry Pi Support from Simulink - Hardware Support - MATLAB & Simulink Matlab与树莓派兼容性 Simulink与树莓派兼容性 树莓派Matlab&Simulink RaspberryPi支…...
嵌入式人工智能(10-基于树莓派4B的DS1302实时时钟RTC)
1、实时时钟(Real Time Clock) RTC,全称为实时时钟(Real Time Clock),是一种能够提供实时时间信息的电子设备。RTC通常包括一个计时器和一个能够记录日期和时间的电池。它可以独立于主控芯片工作ÿ…...
C++ | Leetcode C++题解之第275题H指数II
题目: 题解: class Solution { public:int hIndex(vector<int>& citations) {int n citations.size();int left 0, right n - 1;while (left < right) {int mid left (right - left) / 2;if (citations[mid] > n - mid) {right m…...
编写DockerFile
将自己的项目或者环境通过Docker部署到服务器需要一下几个步骤: 打包项目或者环境 编写Dockerfile文件 运行Dockerfile文件,构建DockerImages镜像,将DockerImages存入DockerHub或者存入阿里云镜像仓库 服务器pull下DockerImages镜像&#…...
TCP并发服务器多线程
1.创建线程‐‐pthread_create int pthread_create( pthread_t *thread, // 线程 ID 无符号长整型 const pthread_attr_t *attr, // 线程属性, NULL void *(*start_routine)(void *), // 线程处理函数 void *arg); // 线程处理函数 参数: pthrea…...
技术速递|C# 13:探索最新的预览功能
作者:Kathleen Dollard 排版:Alan Wang C# 13 已初具雏形,其新特性侧重于灵活性、性能以及使您最喜欢的功能在日常中变得更容易使用。我们以公开的方式构建 C#,在今年的 Microsoft Build 大会上,我们会让您一睹 C# 13 …...
Python设计模式:巧用元类创建单例模式!
✨ 内容: 今天我们来探讨一个高级且实用的Python概念——元类(Metaclasses)。元类是创建类的类,它们可以用来控制类的行为。通过本次练习,我们将学习如何使用元类来实现单例模式,确保某个类在整个程序中只…...
构建自主可控的工业操作系统,筑牢我国工业安全堡垒
构建自主可控的工业操作系统,筑牢我国工业安全堡垒,鸿道(Intewell)操作系统为国家工业发展保驾护航。 7月19日,全球多地安装微软操作系统的电脑设备出现大规模宕机,导致“蓝屏”现象,严重影响了航空、铁路、医疗、金…...
WPF串口通讯程序
目录 一 设计原型 二 后台源码 一 设计原型 二 后台源码 using HardwareCommunications; using System.IO.Ports; using System.Windows;namespace PortTest {/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainW…...
汽车技术智能化程度不断提升,线束可靠性如何设计?
随着汽车技术的高速发展,汽车自动化、智能化程度的逐步提高,人们对汽车的安全性、舒适性、娱乐性等要求也不断提高,加上汽车节能减排法规的不断严峻,整车电气设备不断增加,作为连接汽车各种电器设备“神经网络”的整车…...
实现Nginx的反向代理和负载均衡
一、反向代理和负载均衡简介 1.1、反向代理 反向代理(reverse proxy)指:以代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给Internet上请求连接的客户端。此时代理服务器对外就表现为一个反向代理服务器。 反向代…...
【算法】子集
难度:中等 题目: 给你一个整数数组 nums ,数组中的元素 互不相同 。返回该数组所有可能的 子集(幂集)。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1: 输入:nums [1,…...
Web前端:HTML篇(一)
HTML简介: 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器…...
ActiViz中的选择点vtkWorldPointPicker
文章目录 1. vtkWorldPointPicker简介2. 类的位置和继承关系3. 选择机制4. 返回的信息5. 选择的条件和参数6. 与屏幕空间选择器的比较7. 性能特征8. 应用场景9. 与其他vtk选择器的集成10. 完整示例总结1. vtkWorldPointPicker简介 vtkWorldPointPicker是Visualization Toolkit…...
如何开启或者关闭 Windows 安全登录?
什么是安全登录 什么是 Windows 安全登录呢?安全登录是 Windows 附加的一个组件,它可以在用户需要登录的之前先将登录界面隐藏,只有当用户按下 CtrlAltDelete 之后才出现登录屏幕,这样可以防止那些模拟登录界面的程序获取密码信息…...
【目标检测】Anaconda+PyTorch配置
前言 本文主要介绍在windows系统上的Anaconda、PyTorch关键步骤安装,为使用yolo所需的环境配置完善。同时也算是记录下我的配置流程,为以后用到的时候能笔记查阅。 Anaconda 软件安装 Anaconda官网:https://www.anaconda.com/ 另外&#…...
什么是离线语音识别芯片?与在线语音识别的区别
离线语音识别芯片是一种不需要联网和其他外部设备支持,上电即可使用的语音识别系统。它的应用场合相对单一,主要适用于智能家电、语音遥控器、智能玩具等,以及车载声控和一部分智能家居。离线语音识别芯片的特点包括小词汇量、…...
使用Diffusion Models进行街景视频生成
Diffusion Models专栏文章汇总:入门与实战 前言:街景图生成相当有挑战性,目前的文本到视频的方法仅限于生成有限范围的场景的短视频,文本到3D的方法可以生成单独的对象但不是整个城市。除此之外街景图对一致性的要求相当高&#x…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流,定义在 <sstream> 中: std::istringstream:输入流,从已有字符串中读取并解析。std::ostringstream:输出流,向内部缓冲区写入内容,最终取…...
【开发技术】.Net使用FFmpeg视频特定帧上绘制内容
目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法,当前调用一个医疗行业的AI识别算法后返回…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
