vue 插槽(二)

渲染作用域​

插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的。举例来说:

<span>{{ message }}</span>
<FancyButton>{{ message }}</FancyButton>

这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域,这和 JavaScript 的词法作用域规则是一致的。换言之:

父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。

默认内容​

在外部没有提供任何内容的情况下,可以为插槽指定默认内容。比如有这样一个 <SubmitButton> 组件:

<button type="submit"><slot></slot>
</button>
<button type="submit"><slot>Submit <!-- 默认内容 --></slot>
</button>

 现在,当我们在父组件中使用 <SubmitButton> 且没有提供任何插槽内容时:

<SubmitButton />

 “Submit”将会被作为默认内容渲染:

<button type="submit">Submit</button>

但如果我们提供了插槽内容:

<SubmitButton>Save</SubmitButton>

那么被显式提供的内容会取代默认内容:

<button type="submit">Save</button>

具名插槽​

有时在一个组件中包含多个插槽出口是很有用的。举例来说,在一个 <BaseLayout> 组件中,有如下模板:

<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 的 <slot> 出口会隐式地命名为“default”。

在父组件中使用 <BaseLayout> 时,我们需要一种方式将多个插槽内容传入到各自目标插槽的出口。此时就需要用到具名插槽了:

要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令:

<BaseLayout><template v-slot:header><!-- header 插槽的内容放这里 --></template>
</BaseLayout>

动态插槽名​

动态指令参数在 v-slot 上也是有效的,即可以定义下面这样的动态插槽名:

<base-layout><template v-slot:[dynamicSlotName]>...</template><!-- 缩写为 --><template #[dynamicSlotName]>...</template>
</base-layout>

作用域插槽​

在上面的渲染作用域中我们讨论到,插槽的内容无法访问到子组件的状态。

然而在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点,我们需要一种方法来让子组件在渲染时将一部分数据提供给插槽。

我们也确实有办法这么做!可以像对组件传递 props 那样,向一个插槽的出口上传递 attributes:

<!-- <MyComponent> 的模板 -->
<div><slot :text="greetingMessage" :count="1"></slot>
</div>
<MyComponent v-slot="slotProps">{{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

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

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

相关文章

Java算法之哈希算法

Java算法之哈希算法 哈希表 哈希表&#xff08;Hash Table&#xff09;&#xff0c;也称为散列表&#xff0c;是一种根据关键码值&#xff08;Key Value&#xff09;直接进行访问的数据结构。它通过哈希函数&#xff08;Hash Function&#xff09;将关键码值映射到哈希表中的…

红队攻防渗透技术实战流程:红队目标信息收集之批量信息收集

红队资产信息收集 1. 自动化信息收集1.1 自动化信息收集工具1.2 自动域名转换IP工具1.3 自动企业信息查询工具1.4 APP敏感信息扫描工具1.5 自动化信息工具的使用1.5.1 资产灯塔系统(ARL)1.5.1.1 docker环境安装1.2.2.9.1 水泽-信息收集自动化工具1. 自动化信息收集 1.1 自动化…

boost::asio 启用 io_uring(Linux 5.10)队列支持

欲启用 boost::asio 对于 io_uring 的支持&#xff0c;这需要以下几个先决条件&#xff1b; 1、boost 1.78 及以上发行版本 Revision History - 1.78.0 (boost.org) 2、Linux kernel 5.10 及以上发行版本 3、在预定义头文件&#xff08;stdafx.h&#xff09;、或编译器预定义…

###用sh ``` 用sh ``json失败

###用sh 用sh如果你希望使用 Shell 脚本来实现同样的功能&#xff0c;你可以编写一个简单的 Shell 脚本来执行。以下是一个示例 Shell 脚本&#xff0c;它可以读取 JSON 文件&#xff0c;并将每个章节保存到单独的文本文件中&#xff1a; #!/bin/bash# JSON 文件路径 json_fi…

口语 3.31

spamming :乱发垃圾信息 i keep getting spammed by bots appreciate you 感谢 its been forever&#xff1a;好久没见 i’m a pretty laid back ive been pretty laid back you know .我最近很轻松 clout&#xff1a;名气 im broke &#xff1a;我很穷 got robbed bl…

队列 和 同步状态

文章目录 同步状态阻塞队列如何使用队列来实现广度优先搜索&#xff08;BFS&#xff09;算法条件队列如何使用条件队列实现生产者消费者模型 同步状态 在多线程编程中&#xff0c;同步状态是指用于控制并发访问共享资源的状态。同步状态的正确管理是确保多线程操作安全性和正确…

【Linux实践室】Linux用户管理实战指南:用户权限切换操作详解

&#x1f308;个人主页&#xff1a;聆风吟_ &#x1f525;系列专栏&#xff1a;Linux实践室、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️任务描述二. ⛳️相关知识2.1 &#x1f514;图形化界面登录2.2 &#x1f514;使用login…

Redis 的 Bitmap详解和命令演示

文章目录 Redis 的 Bitmap详解和命令演示特点&#xff1a;常见操作命令&#xff1a;应用场景&#xff1a;优缺点&#xff1a;优点&#xff1a;缺点&#xff1a; 下面是对 Redis 中 Bitmap&#xff08;位图&#xff09;操作命令的详细演示。1. SETBIT&#xff1a;设置位值2. GET…

vue 透传 Attributes

Attributes 继承​ “透传 attribute”指的是传递给一个组件&#xff0c;却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。 当一个组件以单个元素为根作渲染时&#xff0c;透传的 attribute 会自动被添加到根…

Collection与数据结构 链表与LinkedList (一):链表概述与单向无头非循环链表实现

1.ArrayList的缺点 上篇文章我们已经对顺序表进行了实现,并且对ArrayList进行了使用,我们知道ArrayList底层是使用数组实现的. 由于其底层是一段连续空间&#xff0c;当在ArrayList任意位置插入或者删除元素时&#xff0c;就需要将后序元素整体往前或者往后搬移&#xff0c;时…

【python】pygame游戏框架

文章目录 pygame常用模块pygame:主模块,包含初始化、退出、时间、事件等函数。pygame.cdrom 访问光驱pygame.cursors 加载光驱pygame.joystick 操作游戏手柄或者类似的东西pygame.mouse:鼠标模块,包含获取、设置、控制等函数。pygame.key 键盘模块pygame.display:显示模块…

JAVA面试大全之JVM和调优篇

目录 1、类加载机制 1.1、类加载的生命周期? 1.2、类加载器的层次? 1.3、Class.forName()和ClassLoader.loadClass()区别?

mysql 条件/系统/加密/其它函数

学习了日期时间函数&#xff0c;接着学习条件、系统、加密和其它函数。 3&#xff0c;条件判断函数 条件判断函数也称为控制流程函数&#xff0c;根据满足的条件的不同&#xff0c;执行相应的流程。MySQL中进行条件判断的函数有IF、IFNULL和 CASE。 函数 说明 IF(expr,v1,v2…

二叉树寻找祖先问题-算法通关村

二叉树寻找祖先问题-算法通关村 1 最近公共祖先问题 LeetCode236&#xff1a;给定一个二叉树&#xff0c;找到该树中两个指定节点的最近公共祖先。 最近公共祖先的定义为&#xff1a;“对于有根树T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足是…

代码随想录笔记|C++数据结构与算法学习笔记-动态规划(〇)|

本文是简单的视频总结&#xff1a;从此再也不怕动态规划了&#xff0c;动态规划解题方法论大曝光 &#xff01;详细信息还请看代码随想录讲解视频 文章目录 动态规划的常见类型动态规划的误区动规五步曲DP数组以及下标的含义递推公式DP数组如何初始化DP数组遍历顺序打印DP数组…

GeoLite2 geoip数据库下载和使用

GeoLite2 数据库是免费的 IP 地理定位数据库&#xff0c;与MaxMind 的 GeoIP2 数据库相当&#xff0c;但准确度较低 。GeoLite2 国家、城市和 ASN 数据库 每周更新两次&#xff0c;即每周二和周五。GeoLite2 数据还可作为 GeoLite2 Country 和 GeoLite2 City Web 服务中的 Web …

Kotlin 中的类和构造方法

Kotlin 中的类与接口和 Java 中的类与接口还是有区别的。例如&#xff0c;Koltin 中的接口可以包含属性声明&#xff0c;与 Java 不同的是。Kotlin 的声明默认是 final 和 public 的。此外&#xff0c;嵌套的类默认并不是内部类&#xff1a;它们并没有包含对其它外部类的隐式引…

实施阶段(2024年3月)

【项目活动1】需求分析 学生&#xff1a;在系统中可以账号登陆&#xff0c;查看今日菜谱&#xff0c;点餐反馈。 食堂管理人员&#xff1a;对原始数据整合&#xff0c;显示菜品结果统计&#xff0c;并根据统计结果对菜品供应量进行调整反馈&#xff0c;避免浪费。 【项目活动…

MySQL开窗函数

测试环境&#xff1a;mysql8.0.18 官方文档&#xff1a;https://dev.mysql.com/doc/refman/8.0/en/window-functions.html 一、窗口函数介绍二、语法结构三、自定义窗口1.rows&#xff08;重点&#xff09;2.range3.默认窗口 四、常用窗口函数示例1.row_number & rank &…

C++之红黑树插入+查找功能实例(二百六十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…