Vue3-22-组件-插槽的使用详解

插槽是干啥的

插槽 就是 组件中的一个 占位符,
这个占位符 可以接收 父组件 传递过来的 html 的模板值,然后进行填充渲染。
就这么简单,插槽就是干这个的。

要说它的优点吧,基本上就是可以使子组件的内容可以被父组件控制,显得更加灵活。

插槽的关键字

slot : 就是定义插槽的关键字。

插槽的几个小分类

插槽从使用的特点上,可以分为以下几个小类:
1、普通插槽 : 没有任何特殊性,最常规的那种;
2、默认值插槽 : 自带默认值的插槽,父组件没有传值时,会自动渲染默认值;
3、具名插槽 : 顾名思义,就是带名字的插槽,在组件中存在多个插槽时较为常用;
4、作用域插槽 : xxxxxx

插槽的使用案例

下面的案例,基本上包含了插槽常见的使用操作。

1、最简单的使用

【子组件】中声明 <slot></slot> 插槽;
【父组件】中使用组件的时候,直接传入相应的值。

子组件

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        <!-- 声明一个插槽 -->
        <slot></slot>
   
    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')
     
</script>
    
<style scoped>

    .childdiv{
        width: 300px;
        border: 1px solid green;
    }

</style>

父组件

<template>

    <div class="basediv">
      
        父组件msg : {{ msg }}

        <br>
        <br>
        <!-- 使用子组件 : 传入 内容,子组件的插槽中进行渲染 -->
        <ChildComponent >
            <span style="color: green;">这是父组件给子组件插槽中传递的内容</span>
        </ChildComponent>
    
    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 引入子组件
    import ChildComponent from './ChildComponent.vue'

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')
    
</script>
    
<style scoped>

    .basediv{
        width: 400px;
        height: 200px;
        border: 1px solid red;
    }
</style>

运行结果

在这里插入图片描述

2、带默认值的插槽

在<slot></slot> 标签中填写一些内容,就是它的默认值;
当父组件没有传值时,会渲染默认值;
当父组件传值时,会渲染父组件传递过来的值。

子组件

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        <!-- 声明一个插槽 : 是一个带有默认值的插槽-->
        <slot>
            <span style="color: rgb(126, 0, 128);">子组件中插槽的默认值</span>
        </slot>
   
    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')
     
</script>
    
<style scoped>

    .childdiv{
        width: 300px;
        border: 1px solid green;
    }

</style>

父组件

<template>

    <div class="basediv">
      
        父组件msg : {{ msg }}

        <br>
        <br>

        <!-- 使用子组件 : 不传值,子组件会渲染插槽的默认值 -->
        <ChildComponent />
        
        <br>

        <!-- 使用子组件 : 传入 内容,子组件的插槽中进行渲染 -->
        <ChildComponent >
            <span style="color: green;">这是父组件给子组件插槽中传递的内容</span>
        </ChildComponent>
    
    </div>
    
  
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 引入子组件
    import ChildComponent from './ChildComponent.vue'

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')
 
</script>
    
<style scoped>

    .basediv{
        width: 400px;
        height: 200px;
        border: 1px solid red;
    }
</style>

运行效果

在这里插入图片描述

3、具名插槽

组件中如果存在多个插槽,那么给插槽起个名字是一个不错的选择;
一方面在组件内容可以很好地对插槽进行区分;
另一方面,在父组件中使用插槽时,也可以指定名称使用插槽,比较明确。
具名插槽的定义格式  : <slot name="插槽名称"></slot>
具名插槽的使用方式1 : <template v-solt:插槽名称">xxx</template>
具名插槽的使用方式2 : <template #插槽名称">xxx</template>
【注意点】
	具名插槽 和 默认插槽可以同时存在;
	默认插槽 会被自动命名为 “default”;
	* 父组件在使用子组件的具名插槽时,建议 使用 <template> 标签将内容包起来。
	* 当子组件 同时接收到 具名插槽 和 默认插槽时,所有的位于 子组件 直接标签下的 节点,都会默认传给 默认插槽!
	* 父组件在使用子组件的插槽时,同一个插槽只能写一遍,否则会报错 (具名插槽和默认插槽都不可以重复使用)。

子组件 : 包含 【具名插槽】 和 【默认插槽】

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        <!-- 声明第一个具名插槽 -->
        <slot name="slotname1"></slot>
        <!-- 声明第二个具名插槽 -->
        <slot name="slotname2"></slot>
        <!-- 声明第一个默认插槽 -->
        <slot ></slot>
        <!-- 声明第二个默认插槽 -->
        <slot ></slot>

    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')
     
</script>
    
<style scoped>

    .childdiv{
        width: 350px;
        border: 1px solid green;
    }

</style>

父组件 : 使用 子组件的【具名插槽】 和 【默认插槽】

<template>

    <div class="basediv">
      
        父组件msg : {{ msg }}

        <br>
        <br>

        <!-- 使用子组件-->
        <ChildComponent />

        <br>

        <!-- 使用子组件 : 传入 内容,子组件的插槽中进行渲染 -->
        <ChildComponent >
            <!-- 使用具名插槽1  : 写法1 : v-solt:插槽名-->
            <template v-slot:slotname1>
                具名插槽 slotname1 : 父组件给子组件传的值 <br><br>
            </template>

            <!-- 使用具名插槽2  : 写法2 : #插槽名-->
            <template #slotname2>
                具名插槽 slotname2 : 父组件给子组件传的值 <br><br>
            </template>

            <!-- 使用默认插槽1  : 写法1 : #default  : 推荐这种写法,比较明确-->
            <template #default>
                匿名插槽 : 父组件给子组件传的值 <br><br>
            </template>

            <!-- 使用默认插槽2  : 写法2 : 在 子组件标签下的直接的节点,会直接渲染在默认插槽中-->
            <!-- <span style="color: green;">这是父组件给子组件默认插槽中传递的内容<br></span> -->

        </ChildComponent>
    
    </div>
    
  
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 引入子组件
    import ChildComponent from './ChildComponent.vue'

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')

</script>
    
<style scoped>

    .basediv{
        width: 400px;
        height: 200px;
        border: 1px solid red;
    }
</style>

运行效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4、作用域插槽

在上面的案例中,插槽中能够访问的只是【父组件】中的变量,而无法直接渲染【子组件】中的变量值;
尽管 带默认值的 插槽 可以将 【子组件】中的变量放进去,但 当【父组件】传值后,会将 默认值 覆盖,也无法保留【子组件】中的变量值;

作用域插槽就可以实现 将【子组件】想要暴露出去的变量值传递给 【父组件】,【父组件】再将变量的值放到 插槽中,进而实现 渲染 【子组件】的变量的功能。

由于 默认插槽具名插槽 的编码方式不同,因此本小结将分开描述具体的写法。

4.1 只有默认插槽的使用案例

子组件 : 通过 props 将属性暴露出去
父组件 :在 【子组件】的标签上,直接使用 v-slot 指令 接收暴露出来的属性

子组件

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        <!-- 声明一个默认插槽 : 并通过属性暴露出去两个属性 -->
        <slot :aName="a" :bName="b"></slot>

    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')

    // 声明两个属性-暴露出去
    const a = ref('这是第一个属性')
    const b = ref(100)
     
</script>
    
<style scoped>

    .childdiv{
        width: 350px;
        border: 1px solid green;
    }

</style>

父组件

<template>

    <div class="basediv">
      
        父组件msg : {{ msg }}

        <br>
        <br>

        <!-- 使用子组件 : 传入 内容,子组件的插槽中进行渲染 -->
        <ChildComponent v-slot="childProps">
            【父组件中接收到了子组件暴露出来的属性】:<br>
            {{ childProps }}
        </ChildComponent>
    
    </div>
    
  
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 引入子组件
    import ChildComponent from './ChildComponent.vue'

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')

</script>
    
<style scoped>

    .basediv{
        width: 400px;
        height: 200px;
        border: 1px solid red;
    }
</style>

运行结果

在这里插入图片描述

4.2 只有具名插槽的使用案例

父组件在使用子组件的具名插槽时,
需要在 slot 的名称后面接收子组件暴露出来的属性。
语法格式1 :v-slot:name="propsName"
语法格式2 :#name="propsName"

子组件

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        <!-- 声明一个具名插槽 -->
        <slot name="slotname1" :aName1="a" :aName2="b"> </slot>
        <!-- 声明一个具名插槽 -->
        <slot name="slotname2" :bName1="a" :bName2="b"></slot>

    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')

    // 声明两个属性-暴露出去
    const a = ref('这是第一个属性')
    const b = ref(100)
      
</script>
    
<style scoped>

    .childdiv{
        width: 350px;
        border: 1px solid green;
    }

</style>

父组件

<template>

    
    <div class="basediv">
      
        父组件msg : {{ msg }}

        <br>
        <br>

        <!-- 使用子组件 : 传入 内容,子组件的插槽中进行渲染 -->
        <ChildComponent >
            <!-- 使用具名插槽1  : 写法1 : v-solt:插槽名-->
            <template v-slot:slotname1="propsObj1">
                父组件静态文本1 : 第一种写法<br>
                {{ propsObj1 }}
            </template>


            <!-- 使用具名插槽2  : 写法2 : #插槽名-->
            <template #slotname2="propsObj2">
                父组件静态文本2 : 第二种写法<br>
                {{ propsObj2 }}
            </template>

        </ChildComponent>
    
    </div>
    
  
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 引入子组件
    import ChildComponent from './ChildComponent.vue'

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')

</script>
    
<style scoped>

    .basediv{
        width: 400px;
        height: 200px;
        border: 1px solid red;
    }
</style>

运行结果

在这里插入图片描述

4.3 默认插槽和具名插槽的混合使用案例

当 子组件中同时具有 具名插槽和 默认插槽 还需要给 父组件 暴露属性时,
默认插槽 的方式要 与 具名插槽的方式一致,即 使用默认的名称 default
也就是需要使用 <template> 标签将内容包起来

子组件

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        <!-- 声明一个具名插槽 -->
        <slot name="slotname2" :bName1="a" :bName2="b"></slot>
        <!-- 声明一个默认插槽 : 并通过属性暴露出去两个属性 -->
        <slot :cName1="a" :cName2="b"></slot>

    </div>
    
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')

    // 声明两个属性-暴露出去
    const a = ref('这是第一个属性')
    const b = ref(100)
   
</script>
    
<style scoped>

    .childdiv{
        width: 350px;
        border: 1px solid green;
    }

</style>

父组件

<template>

    <div class="basediv">
      
        父组件msg : {{ msg }}

        <br>
        <br>

        <!-- 使用子组件 : 传入 内容,子组件的插槽中进行渲染 -->
        <ChildComponent >

            <!-- 使用具名插槽2  : 写法2 : #插槽名-->
            <template #slotname2="propsObj2">
                具名插槽: 使用#语法糖的格式指定具名插槽<br>
                {{ propsObj2 }}
            </template>

            <!-- 使用默认插槽1  : 写法1 : #default-->
            <template #default="propsObj3">
                匿名插槽  : 要与具名插槽的写法保持一致 <br>
                {{ propsObj3 }}
            </template>

        </ChildComponent>
    
    </div>
    
  
</template>
    
<script setup lang="ts">

    import { ref } from 'vue'

    // 引入子组件
    import ChildComponent from './ChildComponent.vue'

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')

</script>
    
<style scoped>

    .basediv{
        width: 400px;
        height: 200px;
        border: 1px solid red;
    }
</style>

运行结果

在这里插入图片描述

以上就是 组件中 插槽的主要内容。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

商业办公楼烟雾预警,这个方法我只说一次!

烟感监控在现代社会中扮演着至关重要的角色&#xff0c;不仅在火灾预防和安全管理中具有关键性的作用&#xff0c;同时也对人们的生命财产安全起到了至关重要的保护作用。 随着科技的不断发展&#xff0c;烟感监控系统的功能日益强大&#xff0c;为各行业提供了更加智能、高效的…

python图像二值化处理

目录 1、双峰法 2、P参数法 3、迭代法 4、OTSU法 图像的二值化处理是将图像上的像素点的灰度值设置为0或255&#xff0c;也就是将整个图像呈现出明显的只有黑和白的视觉效果。二值化是图像分割的一种最简单的方法&#xff0c;可以把灰度图像转换成二值图像。具体实现是将大…

lambda自定义比较规则-sort函数或优先队列

Lambda表达式的一般形式为 [captures](params){body}对于优先队列的自定义排序规则&#xff0c;常见方法是写成结构体形式 struct cmp{bool operator()(pair<int,int> map1,pair<int,int> map2){return map1.second>map2.second;} }; priority_queue<pair&…

electron与cesium组件入门应用功能

electron与cesium组件入门应用功能 运行应用效果图&#xff1a; electron应用目录&#xff0c;需要包括三个文件: index.html main.js package.json (一)、创建一个新项目 目录名称&#xff1a;project_helloWolrd (二)、生成package.json文件 npm init --yes(三&#x…

饥荒Mod 开发(十六):五格装备栏

饥荒Mod 开发(十五)&#xff1a;小地图显示物品 源码 饥荒中的装备栏只有3个实在太少了&#xff0c;手&#xff0c;头&#xff0c;身体。 身体上装备的物品会有冲突&#xff0c;很多不能一起装备&#xff0c;比如 衣服&#xff0c;项链&#xff0c;背包等。 而这三种物品又有自…

概率论复习

第一章&#xff1a;随机概率及其概率 A和B相容就是 AB 空集 全概率公式与贝叶斯公式&#xff1a; 伯努利求概率&#xff1a; 第二章&#xff1a;一维随机变量及其分布&#xff1a; 离散型随机变量求分布律&#xff1a; 利用常规离散性分布求概率&#xff1a; 连续性随机变量…

Docker单点部署[8.11.3] Elasticsearch + Kibana + ik分词器

文章目录 一、Elasticsearch二、Kibana三、访问四、其他五、ik分词器第一种&#xff1a;在线安装第二种&#xff1a;离线安装 Elasticsearch 和 Kibana 版本一般需要保持一致才能一起使用&#xff0c;但是从 8.x.x开始&#xff0c;安全验证不断加强&#xff0c;甚至8.x.x之间…

Linux - 非root用户使用systemctl管理服务

文章目录 方式一 &#xff08;推荐&#xff09;1. 编辑sudoers文件&#xff1a;2. 设置服务文件权限&#xff1a;3. 启动和停止服务&#xff1a; 方式二1. 查看可用服务&#xff1a;2. 选择要配置的服务&#xff1a;3. 创建自定义服务文件&#xff1a;4. 重新加载systemd管理的…

安防监控视频管理平台EasyCVR v3.4版如何取消首次登录强制重置密码的操作?

在视频监控领域&#xff0c;智慧安防平台EasyCVR平台采用了开放式的网络结构&#xff0c;支持高清视频的接入和传输、分发&#xff0c;能提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频…

【Spring】12 EmbeddedValueResolverAware 接口

文章目录 1. 简介2. 作用3. 使用3.1 创建并实现接口3.2 配置 Bean3.3 创建启动类3.4 启动 4. 应用场景总结 Spring 框架提供了许多回调接口&#xff0c;以便开发者在 Bean 的生命周期中执行一些特定操作。其中之一是 EmbeddedValueResolverAware 接口&#xff0c;本文将深入探…

【Qt之Quick模块】2.创建Qt Quick UI工程

前言 上个文档对Qucik模块进行了概述&#xff0c;及创建Quick应用程序流程。 这个文档是创建Quick UI工程。 Qt Quick UI原型 Qt Quick UI原型项目对于测试或原型化用户界面非常有用&#xff0c;或者只是为了进行QML编辑而设置一个单独的项目。但是不能用它们进行应用程序开…

智能优化算法应用:基于蛾群算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蛾群算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蛾群算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蛾群算法4.实验参数设定5.算法结果6.参考文献7.MA…

Mongodb复制集架构

目录 复制集架构 复制集优点 复制集模式 复制集搭建 复制集常用命令 复制集增删节点 复制集选举 复制集同步 oplog分析 什么是oplog 查看oplog oplog大小 复制集架构 复制集优点 数据复制: 数据在Primary节点上进行写入&#xff0c;然后异步地复制到Secondary节点&a…

[ CTF ]【天格】战队WriteUp-第七届“强网杯”全国安全挑战赛

第七届“强网杯”全国安全挑战赛 2023.12.16~2023.12.17 文章目录 【Misc】Pyjail ! Its myFILTER !!!easyfuzz谍影重重2.0签到Pyjail ! Its myRevenge !!!server_8F6C72124774022B.py 问卷调查 【Reverse】ezre 【Web】happygame 【强网先锋】石头剪刀布TrieSpeedUpezreez_fmt…

6TIM定时器

STM32的定时器功能众多&#xff0c;拥有基本定时功能&#xff0c;输出比较功能&#xff08;如产生PWM波等&#xff09;&#xff0c;输入捕获&#xff08;测量方波信号&#xff09;&#xff0c;读取正交编码器的波形。 1.中断原理 TIM定时器的基本功能是对输入的时钟进行计数&…

@KafkaListener 注解配置多个 topic

见如下示例 主要见 KafkaListener 中 topics 属性的配置 其中 ${xxxx.topic1} 为从springBoot 配置文件中读取的属性值 KafkaListener(topics {"${xxxx.topic1}", "${xxxx.topic2}"}, groupId "${xxxx.groupId}",containerFactory "xxx…

Redis一些常用的技术

文章目录 第1关&#xff1a;Redis 事务与锁机制第2关&#xff1a;流水线第3关&#xff1a;发布订阅第4关&#xff1a;超时命令第5关&#xff1a;使用Lua语言 第1关&#xff1a;Redis 事务与锁机制 编程要求 根据提示&#xff0c;在右侧编辑器Begin-End补充代码&#xff0c;根据…

最新AI创作系统ChatGPT系统源码+DALL-E3文生图+支持AI绘画+GPT语音对话功能

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

Rust与python联动进行多线程跑数据

最近有个学弟想请教我联动多线程爬取数据的案例&#xff0c;看了以前的模版没有合适的&#xff0c;我就利用空闲时间&#xff0c;专门给他写了一段模版作为参考。这里遇到注意的是需要代理IP介入&#xff0c;才能让多线程爬取减少网站风控限制。 以下是一个使用 Rust 编写的爬虫…

【NI-RIO入门】使用LabVIEW进行数据采集测量

于ni kb摘录 选择合适的编程模式 CompactRIO系统具有至少两个用户可选模式。某些CompactRIO型号具有附加的用户可选模式&#xff0c;可以在实时NI-DAQmx中进行编程。请参考本文以判断您的CompactRIO是否能够使用实时NI-DAQmx。将目标添加到项目后&#xff0c;将提示您选择要使…