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

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、先说一下具名插槽 有时在一个组件中包含多个插槽出口是很有用的。举例来说&#xff0c;在一个 组件中&#xff0c;有如下模板&#xff1a; <div class"container"><header><!-- 标题内容放这里 --></header><main><!-- 主要内容…...

Vuforia AR篇(六)— Mid Air 半空识别

目录 前言一、什么是Mid Air&#xff1f;二、使用步骤三、示例代码四、效果 前言 增强现实&#xff08;AR&#xff09;技术正在改变我们与数字世界的互动方式。Vuforia作为先进的AR开发平台&#xff0c;提供了多种工具来创造引人入胜的AR体验。其中&#xff0c;Mid Air功能以其…...

统计信号处理-匹配滤波器实现与验证(matlab仿真)

什么是匹配滤波器 匹配滤波器是一种信号处理技术&#xff0c;它用于从噪声中提取信号&#xff0c;特别是在信号与噪声比率较低的情况下。匹配滤波器之所以存在&#xff0c;是因为它在信号检测和估计方面具有几个关键的优势&#xff1a; 最大化信噪比&#xff1a;匹配滤波器设计…...

四川汇聚荣聚荣科技有限公司综合实力如何?

在探讨一个公司的综合实力时&#xff0c;我们不仅关注其经济表现&#xff0c;还应深入分析其技术实力、市场地位、创新能力、团队素质以及社会责任感等多个维度。四川汇聚荣聚荣科技有限公司作为一家立足于科技领域的企业&#xff0c;其实力究竟如何呢?接下来的内容将围绕这一…...

【Power Compiler手册】7.功耗分析

概述 `report_power` 命令分析并报告设计中各种元素的功耗。在执行此命令之前,必须捕获开关活动,将设计映射到门级,并标注设计。 该工具为以下设计元素创建功耗报告: - 设计 - 模块 - 网络 - 单元或特定类型的单元组 - 多角多模式设计的场景 `report_power` 命令使用…...

详解MySQL的MVCC机制与间隙锁

在MySQL的InnoDB存储引擎中&#xff0c;MVCC&#xff08;多版本并发控制&#xff09;和间隙锁&#xff08;Gap Lock&#xff09;是两种关键的并发控制机制。MVCC主要用于提高读写并发性能&#xff0c;而间隙锁则用于实现更严格的事务隔离&#xff0c;防止幻读现象。以下是对MyS…...

新版校园跑腿外卖独立版+APP+小程序前端外卖配送平台源码

源码介绍&#xff1a; 同城校园跑腿外卖配送平台源码&#xff0c;支持自定义diy 你可以设计你的页面&#xff0c;设计你自己的风格&#xff0c;支持多校园&#xff0c;独立版本&#xff0c;多商户&#xff0c;有用户端&#xff0c;骑手端&#xff0c;商家端&#xff0c;强大的…...

# ROS 获取激光雷达数据 (Python实现)

ROS 获取激光雷达数据 (Python实现) 实现思路 构建一个新的软件包&#xff0c;包名叫做lidar_pkg在软件包中新建一个节点&#xff0c;节点名叫做lidar_node.py在节点中&#xff0c;向ROS大管家rospy申请订阅话题/scan&#xff0c;并设置回调函数为Lidarcallback()构建回调函数…...

单点登录(SSO)前端怎么做

单点登录&#xff08;SSO&#xff09;前端怎么做 本文介绍单点登录&#xff08;SSO&#xff09;是什么&#xff0c;还有就是前端怎么做。 单点登录&#xff08;SSO&#xff09;是什么 单点登录&#xff08;SSO&#xff0c;Single Sign On&#xff09;&#xff0c;是在企业内部…...

【面试干货】索引的作用

【面试干货】索引的作用 1、索引的作用 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1、索引的作用 索引 可以协助 快速查询、更新数据库表中数据。 通过使用索引&#xff0c;数据库系统能够快速定位到符合查询条件的数据&#xff0c;提…...

【成品设计】基于红外线的目标跟踪无线测温系统设计

《基于红外线的目标跟踪无线测温系统设计》 整体功能&#xff1a; A端&#xff1a;无线跟踪端 主控&#xff1a;采用STM32F103C8T6单片机作为核心控制。360度编码模块数字脉冲输出红外解码编码模块OLED屏幕。 B端&#xff1a;无线待测端 主控&#xff1a;采用STM32F103C8T…...

抽象,自定义函数,递归

6.1懒惰是一种美德 如果你 在一个地方编写了一些代码&#xff0c;但需要在另一个地方再次使用&#xff0c;该如何办呢&#xff1f; 假设你编写了一段代码&#xff0c;它计算一些斐波那契数&#xff08;一种数列&#xff0c;其中每个数都是前两个数的和&#xff09;。 现在的…...

php设计模式之策略模式详解

策略模式&#xff08;Strategy Pattern&#xff09;是一种行为设计模式&#xff0c;它使你能在运行时改变对象的行为。在PHP中应用策略模式可以让你轻松地根据需要选择和交换算法或策略&#xff0c;而无需修改使用这些算法的代码。 策略模式的核心概念&#xff1a; 目的&…...

Android在不同层面增加应用

1 App 应用代码一般在开发者的项目目录下&#xff0c;packages/apps/YourApp/&#xff0c;比如app/src/main/java目录下 对于系统应用&#xff0c;源代码可能位于packages/apps/目录下&#xff0c;例如packages/apps/Settings。 用户安装的应用&#xff08;从Google Play或其…...

【Pycharm】功能介绍

1.Code Reformat Code 格式化代码&#xff0c;可以帮助我们去自动调整空格等&#xff0c;根据python语法规范自动调整 2.Settings 1.创建py文件默认填充模版 3.读写py文件编码格式一致性 顶部代码指定的编码方式作用&#xff1a; 可以保证python2/3解释器在读取文件的时候按…...

安卓手机平板使用JuiceSSH无公网IP远程连接本地服务器详细流程

文章目录 前言1. Linux安装cpolar2. 创建公网SSH连接地址3. JuiceSSH公网远程连接4. 固定连接SSH公网地址5. SSH固定地址连接测试 前言 处于内网的虚拟机如何被外网访问呢?如何手机就能访问虚拟机呢? 本文就和大家分享一下如何使用 cpolarJuiceSSH 实现手机端远程连接Linux…...

告别冗长代码:Java Lambda 表达式如何简化你的编程

在现代软件开发中&#xff0c;高效和简洁的代码变得越来越重要。Java作为一门成熟而广泛使用的编程语言&#xff0c;一直在不断进化&#xff0c;以满足开发者的需求。Java 8的推出标志着一次重要的飞跃&#xff0c;其中最引人注目的特性之一便是Lambda表达式。 Lambda表达式为J…...

不同生成式AI模型的优缺点(GAN,VAE,FLOW)

不同生成式人工智能模型的优缺点 近年来&#xff0c;生成式 AI 模型因其能够创建新的原创内容而备受关注。这些模型旨在生成类似于给定训练数据集的数据&#xff0c;从而产生逼真且富有创意的输出。了解不同类型的生成式 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 集成驱动版&#xff0c;在个人电脑上运行企业级工作负载 请访问原文链…...

SpringCloud Consul基础入门与使用实践总结

【1】Consul简介 官网地址&#xff1a;https://www.consul.io/intro/index.html 下载地址&#xff1a;https://www.consul.io/downloads.html 中文文档&#xff1a;https://www.springcloud.cc/spring-cloud-consul.html ① 基础概念 Consul 是一套开源的分布式服务发现和…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...