vue3中作用域插槽
1、先说一下具名插槽
有时在一个组件中包含多个插槽出口是很有用的。举例来说,在一个 组件中,有如下模板:
<div class="container"><header><!-- 标题内容放这里 --></header><main><!-- 主要内容放这里 --></main><footer><!-- 底部内容放这里 --></footer>
</div>
对于这种场景,<slot> 元素可以有一个特殊的 attribute name,用来给各个插槽分配唯一的 ID,以确定每一处要渲染的内容:
<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>
这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 出口会隐式地命名为“default”
要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令:
<BaseLayout><template v-slot:header><!-- header 插槽的内容放这里 --></template>
</BaseLayout>
v-slot有对应的简写 #,因此 可以简写为 <template #header>。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。
下面我们给出完整的、向 传递插槽内容的代码,指令均使用的是缩写形式:
<BaseLayout><template #header><h1>Here might be a page title</h1></template><template #default><p>A paragraph for the main content.</p><p>And another one.</p></template><template #footer><p>Here's some contact info</p></template>
</BaseLayout>
2、作用域插槽
使用场景:
数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。
<!-- <MyComponent> 的模板 -->
<div><slot :text="greetingMessage" :count="1"></slot>
</div>
使用者:
<MyComponent v-slot="slotProps">{{ slotProps.text }} {{ slotProps.count }}
</MyComponent>
我们可以将其类比为一个函数,函数名为default
MyComponent({// 类比默认插槽,将其想成一个函数default: (slotProps) => {return `${slotProps.text} ${slotProps.count}`}
})function MyComponent(slots) {const greetingMessage = 'hello'return `<div>${// 在插槽函数调用时传入 propsslots.default({ text: greetingMessage, count: 1 })}</div>`
}
3、具名作用域插槽
使用者:
<FancyList :api-url="url" :per-page="10">// 使用格式:// 1、(简写)#插槽名='传过来的值'// 2、(非简写)v-slot:插槽名字 ='传过来的值'<template #item="{ body, username, likes }"> // 这里对传过来的值进行了解构<div class="item"><p>{{ body }}</p><p>by {{ username }} | {{ likes }} likes</p></div></template>
</FancyList>
在 之中,我们可以多次渲染 并每次都提供不同的数据 (注意我们这里使用了 v-bind 来传递插槽的 props):
<ul><li v-for="item in items"><slot name="item" v-bind="item"></slot></li>
</ul>
相关文章:
vue3中作用域插槽
1、先说一下具名插槽 有时在一个组件中包含多个插槽出口是很有用的。举例来说,在一个 组件中,有如下模板: <div class"container"><header><!-- 标题内容放这里 --></header><main><!-- 主要内容…...
Vuforia AR篇(六)— Mid Air 半空识别
目录 前言一、什么是Mid Air?二、使用步骤三、示例代码四、效果 前言 增强现实(AR)技术正在改变我们与数字世界的互动方式。Vuforia作为先进的AR开发平台,提供了多种工具来创造引人入胜的AR体验。其中,Mid Air功能以其…...
统计信号处理-匹配滤波器实现与验证(matlab仿真)
什么是匹配滤波器 匹配滤波器是一种信号处理技术,它用于从噪声中提取信号,特别是在信号与噪声比率较低的情况下。匹配滤波器之所以存在,是因为它在信号检测和估计方面具有几个关键的优势: 最大化信噪比:匹配滤波器设计…...
四川汇聚荣聚荣科技有限公司综合实力如何?
在探讨一个公司的综合实力时,我们不仅关注其经济表现,还应深入分析其技术实力、市场地位、创新能力、团队素质以及社会责任感等多个维度。四川汇聚荣聚荣科技有限公司作为一家立足于科技领域的企业,其实力究竟如何呢?接下来的内容将围绕这一…...
【Power Compiler手册】7.功耗分析
概述 `report_power` 命令分析并报告设计中各种元素的功耗。在执行此命令之前,必须捕获开关活动,将设计映射到门级,并标注设计。 该工具为以下设计元素创建功耗报告: - 设计 - 模块 - 网络 - 单元或特定类型的单元组 - 多角多模式设计的场景 `report_power` 命令使用…...
详解MySQL的MVCC机制与间隙锁
在MySQL的InnoDB存储引擎中,MVCC(多版本并发控制)和间隙锁(Gap Lock)是两种关键的并发控制机制。MVCC主要用于提高读写并发性能,而间隙锁则用于实现更严格的事务隔离,防止幻读现象。以下是对MyS…...
新版校园跑腿外卖独立版+APP+小程序前端外卖配送平台源码
源码介绍: 同城校园跑腿外卖配送平台源码,支持自定义diy 你可以设计你的页面,设计你自己的风格,支持多校园,独立版本,多商户,有用户端,骑手端,商家端,强大的…...
# ROS 获取激光雷达数据 (Python实现)
ROS 获取激光雷达数据 (Python实现) 实现思路 构建一个新的软件包,包名叫做lidar_pkg在软件包中新建一个节点,节点名叫做lidar_node.py在节点中,向ROS大管家rospy申请订阅话题/scan,并设置回调函数为Lidarcallback()构建回调函数…...
单点登录(SSO)前端怎么做
单点登录(SSO)前端怎么做 本文介绍单点登录(SSO)是什么,还有就是前端怎么做。 单点登录(SSO)是什么 单点登录(SSO,Single Sign On),是在企业内部…...
【面试干货】索引的作用
【面试干货】索引的作用 1、索引的作用 💖The Begin💖点点关注,收藏不迷路💖 1、索引的作用 索引 可以协助 快速查询、更新数据库表中数据。 通过使用索引,数据库系统能够快速定位到符合查询条件的数据,提…...
【成品设计】基于红外线的目标跟踪无线测温系统设计
《基于红外线的目标跟踪无线测温系统设计》 整体功能: A端:无线跟踪端 主控:采用STM32F103C8T6单片机作为核心控制。360度编码模块数字脉冲输出红外解码编码模块OLED屏幕。 B端:无线待测端 主控:采用STM32F103C8T…...
抽象,自定义函数,递归
6.1懒惰是一种美德 如果你 在一个地方编写了一些代码,但需要在另一个地方再次使用,该如何办呢? 假设你编写了一段代码,它计算一些斐波那契数(一种数列,其中每个数都是前两个数的和)。 现在的…...
php设计模式之策略模式详解
策略模式(Strategy Pattern)是一种行为设计模式,它使你能在运行时改变对象的行为。在PHP中应用策略模式可以让你轻松地根据需要选择和交换算法或策略,而无需修改使用这些算法的代码。 策略模式的核心概念: 目的&…...
Android在不同层面增加应用
1 App 应用代码一般在开发者的项目目录下,packages/apps/YourApp/,比如app/src/main/java目录下 对于系统应用,源代码可能位于packages/apps/目录下,例如packages/apps/Settings。 用户安装的应用(从Google Play或其…...
【Pycharm】功能介绍
1.Code Reformat Code 格式化代码,可以帮助我们去自动调整空格等,根据python语法规范自动调整 2.Settings 1.创建py文件默认填充模版 3.读写py文件编码格式一致性 顶部代码指定的编码方式作用: 可以保证python2/3解释器在读取文件的时候按…...
安卓手机平板使用JuiceSSH无公网IP远程连接本地服务器详细流程
文章目录 前言1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 前言 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? 本文就和大家分享一下如何使用 cpolarJuiceSSH 实现手机端远程连接Linux…...
告别冗长代码:Java Lambda 表达式如何简化你的编程
在现代软件开发中,高效和简洁的代码变得越来越重要。Java作为一门成熟而广泛使用的编程语言,一直在不断进化,以满足开发者的需求。Java 8的推出标志着一次重要的飞跃,其中最引人注目的特性之一便是Lambda表达式。 Lambda表达式为J…...
不同生成式AI模型的优缺点(GAN,VAE,FLOW)
不同生成式人工智能模型的优缺点 近年来,生成式 AI 模型因其能够创建新的原创内容而备受关注。这些模型旨在生成类似于给定训练数据集的数据,从而产生逼真且富有创意的输出。了解不同类型的生成式 AI 模型及其优缺点对于研究人员、开发人员和用户做出明…...
VMware ESXi 8.0U2c macOS Unlocker OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版
VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS 集成网卡驱动 Marvell AQC 网卡定制版 VMware ESXi 8.0U2c macOS Unlocker & OEM BIOS 集成网卡驱动和 NVMe 驱动 (集成驱动版) 发布 ESXi 8.0U2 集成驱动版,在个人电脑上运行企业级工作负载 请访问原文链…...
SpringCloud Consul基础入门与使用实践总结
【1】Consul简介 官网地址:https://www.consul.io/intro/index.html 下载地址:https://www.consul.io/downloads.html 中文文档:https://www.springcloud.cc/spring-cloud-consul.html ① 基础概念 Consul 是一套开源的分布式服务发现和…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
Ubuntu系统复制(U盘-电脑硬盘)
所需环境 电脑自带硬盘:1块 (1T) U盘1:Ubuntu系统引导盘(用于“U盘2”复制到“电脑自带硬盘”) U盘2:Ubuntu系统盘(1T,用于被复制) !!!建议“电脑…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...
MySQL体系架构解析(三):MySQL目录与启动配置全解析
MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录,这个目录下存放着许多可执行文件。与其他系统的可执行文件类似,这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中,用…...
Netty自定义协议解析
目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...
