「 VUE3 Slot 」插槽全家桶使用详解

插槽 slot 就是子组件中提供给父组件使用的一个占位符,用 <slot></slot> 表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换 <slot></slot> 标签。

插槽被分为三种:匿名插槽、具名插槽、作用域插槽。

1、匿名插槽

没有名字的插槽就是匿名插槽,组件可以放置一个或多个 <slot></slot>。

子组件内放置一个插槽:

<template>
    <div>
       <slot></slot>
    </div>
</template>

父组件使用插槽:

<Header>
 <div>哈哈哈哈哈哈</div>
</Header>

// 或
<Header>
 <template v-slot>
  哈哈哈哈哈哈
 </template>
</Header>

如果有多个 slot 时,父组件中需要填充的内容就会被多次插入。

2、具名插槽

组件内可以放置多个插槽,如果都是匿名插槽的时候,渲染的都是父组件默认内容,无法实现插入多个不同内容,此时就需要给插槽设置名字以便于区分它们。

具名插槽就是给插槽取个名字,可以把组件内多个插槽放在不同的地方,父级填充内容时,可以根据名字把内容填充到对应的插槽内。

定义为多个插槽的组件:

<template>
  <div>
    头部:
    <slot name="header"></slot>
    主体:
    <slot></slot>
    底部:
    <slot name="footer"></slot>
  </div>
</template>

父组件填充内容需要对象插槽名:

<Com>
  <template v-slot:header>
    <div>我是header</div>
  </template>
  <template v-slot>
    <div>中间匿名插槽</div>
  </template>
  <template v-slot:footer>
    <div>我是 footer</div>
  </template>
</Com>

可以简写为:

<Com>
  <template #header>
    <div>我是header</div>
  </template>
  <template #default>
      <div>中间匿名插槽</div>
  </template>
  <template #footer>
    <div>我是 footer</div>
  </template>
</Com>

3、作用域插槽

匿名插槽和具名插槽父组件只能访问父组件中编译的内容,子组件只能访问子组件内的内容,有时我们在父组件需要访问到子组件中的内容,此时 vue 给我们提供了作用域插槽。

作用域插槽子组件内定义要传送的数据:

<template>
  <div v-for="item in 10" :key="item">
    <slot :data="item" name="list"></slot>
  </div>
</template>

在调用组件的父组件内接收数据:

<SlotCom>
  <template #list="{data}">
    {{ data }}
  </template>
</SlotCom>

4、动态插槽

有多个插槽,不同状态下展示不同的插槽,此时我们就可以使用动态插槽,插槽名是一个变量名,其值可以是动态修改的。

<Dialog>
  <template #[name]>
    <div>
    动态插槽
		</div>
</template>
</Dialog>

我们可以做一个类似于选项卡的效果:

父组件代码:

<button v-for="item in slotList" :key="item.name" @click="changeSlot(item)">
	{{ item.content }}
</button>
<childCom>
	<template #[name]>
		<div>我是{{ name }}插槽</div>
	</template>
</childCom>
<script>
import { reactive, ref } from 'vue'
let name: string = ref('header')

type Slots = {
  name: string
  content: string
}
const slotList = reactive<Slots[]>([
  { name: 'header', content: '头' },
  { name: 'body', content: '中间' },
  { name: 'footer', content: '尾' },
])
const changeSlot = (item: Slots): void => {
  name.value = item.name
}
</script>

子组件代码:

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
    <slot name="footer"></slot>
  </div>
</template>

此时就可以动态地选择其中任意一个插槽展示。

本文链接:https://www.dzdvip.com/34729.html 版权声明:本文内容均来源于互联网。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 395045033@qq.com,一经查实,本站将立刻删除。
(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年7月14日 21:43
下一篇 2022年7月14日 21:50

相关推荐

  • 跨境电商如何转型?

    历经过去十来年的发展,中国跨境电商的发展已经初具规模。在 2020 年全球经济普遍下行的情况下,中国的跨境电商零售却逆势上扬。 据中国海关统计,2020 年通过海关跨境电子商务管理平台验放进出口清单达 24.5 亿票,同比增长 63.3%,是4倍于受到国际宏观环境负面影响较小的 2017 年。以数额计算¹,2020 年中国跨境电商进出口同比增长了 31.1%,其中出口增速为 40.1%,远高于进口。² 跨境电商的良好态势得益于企业和国内政策资源的扶持,也离不开行业在长期发展中积累下来的成熟的供应链、制造以及人才优势。国内跨境电商不仅积累了较强的产品,也在积极探索如何利用新技术和新渠道去更好地满足消费者的需求。有了前辈们的引领,越来越多的电商企业抱着成为在全球范围内受欢迎的消费品牌的梦想,并正在为之努力。 跨境电商的良好态势得益于企业和国内政策资源的扶持,也离不开行业在长期发展中积累下来的成熟的供应链、制造以及人才优势。国内跨境电商不仅积累了较强的产品,也在积极探索如何利用新技术和新渠道去更好地满足消费者的需求。有了前辈们的引领,越来越多的电商企业抱着成为在全球范围内受欢迎的消费品牌的梦想,并正在为之努力。 与此同时,市场环境也在向所有电商企业转递着相似的信号——市场环境越来越成熟,企业需要寻找可持续发展模式。在 2019 年,全球跨境网购普及率已达到 51.2%。³ 经过 2020 年,在疫情的催化下,消费人群以及购物心理的变化日益加快,全球电商市场更是加速发展,并且逐渐演变为一种“新常态”,这也就要求跨境电商们可能需要采用新的方式,以维持自身可持续的发展,获得更加长久的生命力。   品牌建设:跨境电商的新拐点 在疫情的影响下,全球消费者购物行为大量从线下转到线上,这不仅为跨境电商带来了极好的发展契机,同时也深刻地改变了跨境电商的竞争格局。虽然用户增长似乎变得容易了,但如何留住用户则更加地暴露出了传统铺货与流量变现类商业模式的短板。如果品牌销量的增长以流量和商品为中心,就忽略了与消费者之间的沟通和连接。反过来对消费者而言,与品牌的接触就会只局限于购买行为,并没有留下深刻的购物印象和体验。如此一来,品牌很难实现用户沉淀,这更加意味着难以获得持续增长。当行业红利逐渐退去,竞争由增量转向存量时,若想实现长期的可持续发展,如何从用户出发驱动增长、打造品牌来沉淀消费…

    2021年6月10日
    17
  • 桌面上只有一个箭头,只有一个光标怎么办?

    桌面上只有一个箭头,只有一个光标怎么办? 友情提醒:数据无价,谨慎操作。电脑上有重要,最好先备份,再操作。   桌面上只有一个箭头,只有一个光标,怎么办? 方法一:先进PE,用桌面上的启动修复工具,修复一下系统,看看能不能,正常进系统。这个方法,需要有系统启动盘。 方法二: 大体思路就是,正常启动电脑,进系统,等桌面上只有一个箭头时,同时按下Ctrl +Alt +Del,会出现,下面的画面,再点击,启动任务管理器,   点击启动任务管理器 会出现下面的画面。   点击文件,再点击新建任务运行 点击左上角的,文件,再点击,新建任务运行。会出现下面的画面:   点击浏览 点击,浏览,找到360安全卫士安装包,我是提前下载到U盘里的,360安全卫士的安装包,名字是setup,   找到自己提前下载好的,360安全卫士安装包Setup ,我是从别的电脑上,下载好,拷贝到U盘里的   点击确定,安装360安全卫士 双击setup,即可正常安装360安全卫士,会出现下面的画面:   点击安装,即可正常安装360安全卫士。 点击安装,即可正常安装360安全卫士,安装完360安全卫士,会出现下面的画面:   点击,立即体检 点击,立即体检,   体检完,点击一键修复 体检完,点击一键修复。 再依次点击,2木马查杀,3电脑清理,4系统修复,5优化加速。在进行这些修复时,会提示,重启电脑,暂时不要重启电脑。   再依次点击,木马查杀,电脑清理,系统修复,优化加速。 一会全部处理完这几项,再打开360软件管家,点右上角的卸载,卸载垃圾软件,弄不懂啥软件的,英文名的软件,不要卸载,有可能是驱动程序。     卸载完垃圾软件,再同时按下,Ctrl +Alt +Del,会出现,下面的画面,再点击,屏幕右下角的,重新启动,电脑就会重启。   同时按下,Ctrl +Alt +Del,再点击,屏幕右下角的,重新启动,电脑就会重启 启动时,什么也不按,过一会,电脑就正常进系统了,桌面上的图标和文件,又都回来了,至此,电脑就修好了。 方法三: 我试了一下,用下面的方法不行。也就是,新建explorer不行。   新建explorer不行。不能修复桌面上只有一个箭头,只有一个光标的问题   我试了一下,这个办法不行,是不是忘了输.exe ?我好像只输入了explorer ,下次再试试这个办法行不行。 后遗…

    2021年8月10日
    18
  • 《科学》:恐龙消失的直接原因(恐龙消失的直接原因是什么)

    科学家认为,6600万年前,一颗来自太空的小行星撞击地球表面,在海底留下了一个巨大的陨石坑,对地球造成了严重破坏。 恐龙世纪 不过,不是那颗注定恐龙灭绝的小行星,而是大约在同一时间在西非海岸 248 英里外的一个以前不为人知的陨石坑。 对所谓的纳迪尔陨石坑的进一步研究可能会改变我们对自然历史上那个灾难性时刻的了解。 爱丁堡赫瑞瓦特大学的助理教授 Uisdean Nicholson 偶然发生在陨石坑上——他正在审查另一个关于南美和非洲之间构造分裂的项目的地震勘测数据,并在 400 米以下发现了陨石坑的证据:海底沉积物。 “在分析数据时,我(遇到)这个非常不寻常的类似火山口的特征,这与我以前见过的任何东西都不一样,”他说。 陨石撞地球 “它具有撞击坑的所有特征。” 为了绝对确定陨石坑是由小行星撞击造成的,他说有必要钻入陨石坑并测试陨石坑底部的矿物质。 但它具有科学家们所期望的所有特征:火山口宽度与深度的正确比例、边缘的高度以及中央隆起的高度——中心隆起是由岩石和沉积物在冲击压力下形成的土丘。 《Science Advances》杂志周四发表了这项研究。 “发现陆地撞击坑总是很重要,因为它们在地质记录中非常罕见。地球上确认的撞击结构不到 200 个,还有相当多的可能候选结构尚未得到明确证实,”马克说 Boslough,新墨西哥大学地球与行星科学研究教授。 他没有参与这项研究,但同意这可能是由小行星引起的。 海底陨石坑 博斯洛说,这一发现最重要的方面是它是一个潜艇撞击坑的例子,而已知的例子很少。 “研究这种大小的水下撞击坑的机会将有助于我们了解海洋撞击的过程,这是最常见但保存或了解最少的。” 级联后果 该陨石坑宽 8 公里(5 英里),尼科尔森认为这很可能是由一颗 400 多米(1,300 英尺)宽的小行星撞击地壳造成的。 虽然比城市大小的小行星小得多,它造成了 100 英里宽的希克苏鲁伯陨石坑,该陨石坑撞击墨西哥海岸,导致地球上大部分生命的大规模灭绝,但它仍然是一块相当大的太空岩石。 小行星 尼科尔森通过电子邮件解释说:“(最低点)影响将在当地和区域内产生严重后果——至少横跨大西洋。” “本来会发生大地震(6.5-7级),因此当地的地面震动很大。空气爆炸会在全球范围内听到,并且本身会在整个地区造成严重的局部破坏。 它会在火山口周围引发高达 3,200 英尺(1 公里)的“…

    2022年8月18日
    19
  • 小学数学单位换算公式大全表(单位换算公式大全表)

    单位换算题是小学数学学习重点之一。孩子对单位换算记忆不够深刻,所以总是混淆运用,绕来绕去会出现计算失误,进率错误等问题。     单位换算大全来啦,还有记忆窍门,就算是小马虎也能一目了然,熟记于心。记得多摘抄、常背诵哦! 口诀 大化小,往右移,进率有几个“0”,就移几位。 小化大,往左移,进率有几个“0”,就移几位。     ♦长度单位     国际单位是“米”(符号“m”),最常见的有千米(km)、米(m)、分米(dm)、厘米(cm)、毫米(mm)。 感性认识 指甲厚一毫米,指甲长一厘米,手掌宽一分米,张开手臂长一米。 换算公式 1千米(km)=1000米(m), 1米(m)=10分米(dm)。 1米(m)=10分米(dm)=100厘米(cm)=1000毫米(mm) 1分米(dm)=10厘米(cm)=100毫米(mm) 1厘米(cm)=10毫米(mm)   熟记口诀 米、米、米,是老大,分米分米是老二, 厘米厘米是老三,毫米毫米是老四。 米就要比分米大,大多少?是十倍; 分米要比厘米大,大多少,也十倍; 厘米要比毫米大,大多少,还十倍。 手掌记忆进率 伸出一只手,小指、无名指、中指、食指、拇指依次表示毫米、厘米、分米、米、千米。毫米、厘米、分米、米指缝相等,想象一下只能夹一个蛋,代表进率是10。而拇指和食指空隙较大,想象一下能夹三个蛋,代表进率是1000。     ♦时间单位     1世纪=100年 1年=12个月 世纪:计算年代的单位,一百年为一个世纪。 大月(31天)有:1\3\5\7\8\10\12月 大月:指阳历(公历)有三十一天的月份,公历每年一﹑三﹑五﹑七﹑八﹑十﹑十二这七个月为大月,均三十一天。 小月(30天)的有:4\6\9\11月 小月:指阳历一个月三十天或农历一个月二十九天的月份。 平年2月28天,闰年2月29天 平年:阳历或阴历中无闰日的年,或阴阳历中无闰月的年。 平年全年365天,闰年全年366天 闰年:阳历或阴历中有闰日的年,或阴阳历中有闰月的年。 1日=24小时 1时=60分 日:以地球自转周期为基准的时间单位,等于86400s。 分:时间的辅助单位。 1分=60秒 1时=3600秒 秒:时间的基本单位。 ♦人民币单位     人民币的单位为元,人民币辅币单位为角、分。单位之间是十进制关系。 人民币货币符号是“¥”。 换算公式 角:一…

    2021年9月21日
    153
  • wordpress添加友情链接的方法

    wordpress默认安装的模板,后台没有“链接”这个选项,其实wordpress是有友情链接功能的,无须开发,只要启用wordpress友情链接功能即可   以默认安装的模板为例,wordpress添加友情链接的方法如下:   第1步:打开文件:/wp-content/themes/twentytwentyone/functions.php 拉倒最底部添加如下代码: //开启wordpress友情链接管理 add_filter( ‘pre_option_link_manager_enabled’, ‘__return_true’ );   第2步:打开文件:/wp-content/themes/twentytwentyone/footer.php 拉倒最底部添加如下代码: <?php wp_footer(); ?> <!–友情链接–> <?php if ( is_home()) { ?> <li> 友情链接: <?php wp_list_bookmarks(‘title_li=&categorize=0&orderby=rand&limit=24’); ?> </li> <?php } ?>   至此,wordpress添加友情链接大功告成!样式自己修改处理即可。

    2021年8月18日
    78
  • 做设计需学的20条小技巧

    一、这张图的长宽是多少?是不是有人这样问过你。常规路径下的形状或者一张位图,如何快速知道它的 长宽?(如下图) Tips:选中图层–F8(信息)–ctrl T,就可以看到宽高(WH)了。 二、在PSD之间拖动图层的时候,如果碰到画布宽高小于拖入图像大小的时候,有没有更加快捷的办法? (如下图) 900*700,把这张图拖到宽高200*200的画布里面。 会变成这样 Tips:图像菜单–显示全部。即可解决。不需要更改画布大小 三.选区自由变换(如下图) Tips:选中图层。选择–变换选区。做一些很复杂的蒙版效果非常有帮助 四.将矢量工具与变化和像素网格对齐(如下图) 默认是打上勾的,把勾去掉之后会是这个样的(如下图) Tips:如果默认勾选的情况下一次只能调整一个像素。把勾去掉后可以用方向键来微调(一个像素的大小可以微调几十次,调的非常细),这对于一些不规则的形状微调很有帮助。 五、复制色值 Tips:吸管工具–右键即可复制(拷贝颜色的十六进制代码)。方便很多。 六、超出色域提示 假设这是你做好的图片需要印刷 这幅图中灰色部分的颜色就是色域警告,印刷的时候可能会出现问题。 Tips:菜单栏。视图–色域警告。你可以边做边检查。 七、做一张300像素/英寸的印刷作品时,由于分辨率较高。在PS上预览和实际打印出来的尺寸有差别, 如何解决? PS上的预览效果 调整中 调整后的效果 Tips:视图–打印尺寸。可以预览实际打印出来的大小 八、一个PSD的图层多了之后,如果有部分图层因需要把它们锁定了,可以用选择工具(V),按住alt点 击选中锁定的图层。 九、关于图层蒙版。在图层上提前画好需要遮挡的选区,然后点击蒙版按钮,出来的效果是把选区外的部 分给遮挡住了(默认效果)。但是很多时候我们需要把我们自己做的选区给遮挡起来。(如图) 最终效果图,不需要反选,一步到位 Tips:在图层上做选区,按住ALt点击蒙版按钮,可以反选蒙版遮挡区域。 十、按住ALT拖到PS里面的图层是“链接的智能对象”。关于链接的智能对象简单补充一下。好处:假如 一个项目中有200多个PSD文档,可以将一个项目中相同的部分(比如头部尾部列表)做成一个链接 的智能对象,这些相同的部分当需求方提出修改的时候,我们只需要找到这个“链…

    2021年6月13日
    14