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…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...
