「 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

相关推荐

  • 快速解决主板故障的五大绝招

    为什么主板无法正常开机,内存发出“嘀嘀”的报警声? 故障分析:出现该现象的可能原因是主板内存插槽性能不佳,内存条上的金手指与插槽簧片接触不良;也可能是记忆棒上的金手指,镀金效果的外观不好。 为什么主板无法正常启动,同时内存发出 “ 嘀嘀 ” 警报声。 故障分析: 出现这种现象的可能原因是主板内存插槽性能不佳,内存条上的金手指与插槽簧片接触不良;也可能是记忆棒上的金手指,镀金效果长期不好看。在工作过程中,镀金表面呈现出厚厚的氧化层,导致内存模块接触不良。另一种可能是内存条的制作工艺不规范,看起来有点薄,以至于内存条和插槽之间总有一些缝隙。轻微的振动可能会导致内存接触不良并引起警报。 故障应对: 要解决这种现象,只需在断电的情况下打开电脑机箱,取出内存模块即可。内存条上的灰尘或氧化层会用橡皮擦擦干净,然后再拉到内存插槽中。如果内存太薄,可以用热熔胶把插槽两边的小缝隙填满,保证内存条不会左右晃动,也可以有效防止金手指被氧化。如果上述方法无法解决问题,可以尝试更换新的内存条;如果在更换新内存的情况下仍然出现报警,此时只能尝试更换主板。 为什么无法正确识别出键盘和鼠标? 故障分析: 出现这种现象的可能原因是主板不支持键鼠,所以系统找不到键鼠,即使找到鼠标,鼠标操作也不会听你的控制;或者当键盘和鼠标连接到电脑时,接口连接松动。这样容易造成键鼠与主板接触不良;还有一个原因是鼠标和键盘本身有问题,导致系统无法有效识别。 故障应对: 首先检查一下说明书,看看主板到底支持什么样的键盘、鼠标,要是当前使用的与主板不兼容的话,可以重新更换主板可以兼容的键盘、鼠标,就能解决问题;要是鼠标、键盘的连接端口出现松动的话,可以重新更换一下键盘、鼠标接口,确保连接稳定、可靠;要是上面的方法无法解决问题的话,必须检查键盘、鼠标自身的问题,例如检查它供电电压是否稳定 5V 要是不正常的话,就应该检查供电平安电阻有没有出现熔断现象,要是平安电阻数值很大的话,可以使用较细的导线直接连通。 为什么打印机不能正常工作? 故障分析: 除了排除打印机自身故障和软件故障外,打印机无法正常工作。很有可能是在通电状态下插拔打印线导致打印机接口损坏。 故障应对: 要解决这个问题,必须更换新的打印机芯片。这种打印芯片通常可以在同型号的旧主板上找到。可以请专业人士协助焊接打印芯片;如果打印机可以支持USB接口 如果需要,您可以…

    2021年7月3日
    0
  • 硫酸铵用途(硫酸铵的作用与用途)

    “硫酸铵的用途:一种优良的氮肥(俗称肥田粉),适用于一般土壤和作物,能使枝叶生长旺盛,提高果实品质和产量,增强作物对灾害的抵抗能力,可作基肥、追肥和种肥。食品酱色的催化剂,鲜酵母生产中培养酵母菌的氮源,酸性染料染色助染剂,皮革脱灰剂。此外,还用于啤酒酿造,化学试剂和蓄电池生产等。 在当前的农业作物种植过程中,我们会经常遇到硫酸铵肥料,也会经常使用硫酸铵肥料,不可否认,硫酸铵肥料在作物的生产种植过程中起到了很大的作用,今天给大家分享一下硫酸铵肥料的主要特性和使用注意事项,希望能帮助到需要的朋友们。 硫酸铵,有时候我们也简称它硫铵,市面上很多挤压颗粒肥料都是以它作为主要原料再添加其他肥料成分挤压而来的。 硫酸铵是一种透明的晶体,它很容易溶于水,而且吸湿性也比较小。它的含氮量为20%~21%左右,属于生理酸性肥料。由于作物吸收的由硫酸铵分解出来的铵离子要比硫酸根离子多,所以,经常使用硫酸铵肥料会使得土壤偏向酸性土壤方面发展。 但是,在石灰性土壤中使用硫酸铵肥料,却不会引起土壤酸化,这是因为石灰性土壤中含有大量的碳酸钙盐类物质的缘故。所以硫酸铵肥料比较适合在碱性土壤环境中使用。 硫酸铵肥料在使用过程中,要注意以下几方面的事项: 1,由于氨在碱性环境下易于挥发,所以使用硫酸铵肥料的时候要注意覆土。 2,在酸性土壤环境中,以及有机质含量少的土壤中,还有缓冲性能小的土壤环境中,如果长期使用硫酸铵肥料,就很可能导致土壤酸化,容易使土壤板结。所以此时,就要配合石灰,钙镁磷肥,有机肥以及草木灰等肥料一起使用,效果会好一些。 3,硫酸铵肥料可以在各类作物上使用,但是最好是用在喜硫作物上,这样它的效果会更好,譬如说使用在大蒜等作物上的效果就比较好。 4,硫酸铵肥料不仅可以作基肥使用,它还能作追肥和种肥使用。但是,相对来说,用作种肥和追肥使用,它更合适,效果也会更好。 以上,是对硫酸铵肥料的特性和使用注意事项的分享,如有不足之处,欢迎留言批评指正。谢谢!

    2022年9月3日
    13
  • 手机屏幕怎么选(如何选手机 之屏幕篇)

    开始这期内容之前,我想先做一个问卷调查,屏幕前的你每天使用手机的时长是多少? 除了计步、开手电、砸核桃等息屏能完成的操作,想要实现手机上的其它功能都基本上需要屏幕的配合才能够完成。 通过滑动、点按,完成看视频、浏览新闻、玩游戏等操作,可以说屏幕既是信息的载体,同时也是是人与手机进行互动最主要的“窗口”。 而屏幕素质的好坏,在很大程度上也直接决定了一部手机使用体验的优劣。我们今天就来聊聊手机屏幕应该要怎么选。 目前,根据手机屏幕的工作原理的不同,大体分为两种类型:一种是LCD屏,另一种是OLED屏。 两者之间的结构差异可以看下面这张图,可以记住一个结论:OLED屏相较于LCD屏,在整个屏幕结构上要更薄。 从效果上看,OLED屏在对比度上有明显优势,就是暗的地方能更暗,亮的地方能更亮。 而LCD屏由于自身结构的特性,在现实黑色背景时总是不那么纯粹,有种灰蒙蒙的感觉。 在屏幕亮度上,OLED屏相较于LCD屏优势也更加明显,即便是在湖太大太阳底下OLED也能够清楚地看清屏幕内容,而LCD则是要逊色一点。 而且在屏幕拖影问题上,OLED屏相较于LCD屏也优势明显,在快速滑动内容的时候OLED屏基本上不会出现拖影现象,而LCD屏则是会有明显的拖影情况。 总的来说,OLED的优点很明显,凡是和显示效果沾边的,OLED基本上都要更优秀,所以如果你在意屏幕的显示素质,那么建议入手OLED屏机型。 但LCD屏也并非一无是处。 首先在屏幕的耐久度问题上,LCD屏的优势要更大。LCD屏幕是无机材料,老化速度相对于有机材料的OLED要慢得多,烧屏情况相较于OLED要更小。 如果你在使用手机的时候,有长时间停留在某一个静止画面的情况,建议吃用LCD屏的机型。 其次是频闪问题。 屏幕是需要控制亮度的,对于LCD,我们直接通过调整背光层的电压就能控制亮度(DC调光)。 而OLED控制亮度的方法就是不断的开关开关开关,开关的次数高到一定程度了肉眼就无法看出来了(PWM调光)。 而有部分用户对于PWM调光较为敏感,尤其是在屏幕亮度较低的时候,会觉得眼睛难受,头晕,这就是PWM调光的频闪效应导致的。 如果你是这类型的用户,那基本就告别OLED屏了,老老实实用LCD屏吧。 其次像素密度问题,在相同分辨率的情况下,LCD屏的画面精细度要比OLED屏更高。 但我个人认为这一点是影响最小的,因为目前即便是OLE…

    2021年10月20日
    9
  • 网站文章采集工具软件有哪些?

    文章采集工具不知道大伙有没有了解过,可能有些站长没有接触吧!采集工具一般是一些站群或者大型门户站使用的,像企业站一般很少使用的,当然了有一些个人站也有人在用采集的,因为一些情况不想自己去更新文章或者是大站需要更新的文章多又杂,比如新闻站这些,他们都是利用采集的,那么网站文章采集工具有哪些可以使用呢? 1、火车头 对于seo人员来说,火车头就是一款比较常用的采集软件了。下载安装火车头采集器,有付费与免费版,百度查找下载地址。(这里不细说) 2、八爪鱼 八爪鱼采集器是用于快速网页信息采集的工具,常用来采集网站文章、网站信息数据等。八爪鱼有免费的版本,也有收费版本,这个的话就要根据自己或者公司的需求了,免费版在很多方面被限制。 3、后羿采集 这款采集工具比较智能,需要人配置的地方很少,可以算是傻瓜式操作的软件了。 织梦程序采集插件: 1、采集侠 使用采集侠的插件,网站必须是织梦的,因为这个插件是织梦的采集插件。采集侠是直接通过关键词采集文章,采集侠是一款收费的软件,当然我们也可以下载破解版的,具体可以百度搜。 2、采集节点 织梦采集节点是织梦后台程序自动带的,采集节点是完全免费的,但是采集并不是很强大,有很多东西无法实现。 首先我们要知道,大的站点基本上都是有自己的开放的采集点,他们很少使用工具的,身为一个seo我们并没有那么强大的技术支持,所以只能使用一些工具来实现采集。

    2021年6月16日
    4
  • 身份证第18位的Ⅹ读作shí(身份证号码第18位是什么)

    1月6日,2021十大语文差错发布。据《咬文嚼字》主编黄安靖介绍,2021年,身份证上的公民身份号码最后一位“Ⅹ”的误认、误读,引起了社会的广泛议论,“Ⅹ”表示的是罗马数字“10”,读作shí最为妥当。(人民日报记者曹玲娟) 你仔细看过你的身份证吗? 大部分的身份证号码都是由数字组成的,但是,有一些小伙伴却拥有“神秘身份”——他们身份证的末位数是X! 为啥是个“X”?这个“X”应当读成“叉”还是“艾克斯”?为什么很多科技产品和影视剧中,都喜欢用X? 今天,阿研为你一一揭秘。 身份证号码的编排规则是有讲究的,最后一位数是“校验码”,由公式计算而来,用0~10表示。 问题来了,身份证位数是固定的,最后一位验证码不能是两位数的10啊!为了解决这个问题,我们用X代替阿拉伯数字10,X是罗马数字中的10。 所以,身份证上的X,应当读作shí。 在阿拉伯数字传入欧洲之前,欧洲人一直使用罗马数字计数,其规则是这样的: 罗马数字除了出现在钟表上,还被用来表示电视节目制作的年份,如©MMXXI、©MMXX、©MMXIX、©MMXVIII、©MMXVII、©MMXVI,分别对应2021年、2020年、2019年、2018年、2017年、2016年。 众所周知,圣诞节的英文单词是Christmas,然而,有些地方却写成Xmas,这难道是因为X和Christ发音比较像吗? 不完全是。 Christmas(圣诞节)这个词,是由Christ(基督)和Mass(礼拜、弥撒)两个词组合而来的,指为纪念基督耶稣的降生而齐聚礼拜的活动。 最早的《圣经》,是用希腊文记录的。在希腊语中,X是“基督”这个词的首字母,所以人们常用X作为”基督”一词的缩写,这种用法可以追溯到16世纪。 到了英语国家,人们也用X作为Christ(基督)一词的缩写,于是就有了Xmas这种古老的用法。 现在Xmas这种用法已经没有太多的宗教意味,更多的是为了书写的时候省事,常见于贺卡或标牌。而读音,则推荐使用Christmas的读音,即Xmas读作[ˈkrɪsməs]。 翻开字典,x开头的单词只有几页,而且大多是艰涩难懂的专业词汇,日常用词少之又少,这是为啥呢? 一般认为,这和x的读音有关。x的发音中有两个辅音:/ks/。如果单词以x开头,会很难读。所以,x开头的单词不仅数量少,读音也通常为/z/,比如: 我们知道,x在数学中表示未…

    2022年1月6日
    17
  • 应对亚马逊产品差评新方法

     亚马逊产品差评可以联系客人了。 1. 必须要品牌备案。 2. 用亚马逊brand 分析下的 “Customer reviews“ 找到差评。 直接点“contact buyer” 就行了. 3. 选择 a. 给客人退款,再发一个 或者 b. 联系客人看一下如何解决问题。 祝大家大卖

    2021年6月27日
    4

发表评论

您的电子邮箱地址不会被公开。