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>

运行结果

在这里插入图片描述

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

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

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

相关文章

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现（一）

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现（一）

锁的获取 5.1 锁的强弱 当线程已经持有的锁比新申请的锁更强时&#xff0c;认为已经持有了锁&#xff0c;无需再对申请锁类型加锁。锁的强弱指持有的锁与其他锁的不兼容集合大小&#xff0c;集合相同锁相同&#xff0c;集合更大锁更强&#xff0c;否则无强弱关系。通过锁的兼…
阅读更多...
JavaScript基础篇

JavaScript基础篇

目录 1.初始JavaScript 2.Js数据类型 2.1强制转换类型 1.转换为String类型 2.转换为Number类型 3.转换为 Boolean 4.转义符 2.2运算符 2.3分支结构 1.初始JavaScript <!-- 1. 文件引入 --> <!--<script src"./js/index.js"></script>-…
阅读更多...
JVM-7-经典垃圾收集器

JVM-7-经典垃圾收集器

Serial收集器 这个收集器是一个单线程工作的收集器&#xff0c;但它的“单线程”的意义并不仅仅是说明它只会使用一个处理器或一条收集线程去完成垃圾收集工作&#xff0c;更重要的是强调在它进行垃圾收集时&#xff0c;必须暂停其他所有工作线程&#xff0c;直到它收集结束。…
阅读更多...
sql服务无法启动 请键入net helpmsg 3534

sql服务无法启动 请键入net helpmsg 3534

然后 如果是管理员权限打开命令行输入操作的话 先清空 MySQL 下的 data 文件夹&#xff0c;然后确保系统环境变量中已经配置了 mysql 的 bin 目录到Path中&#xff0c;然后执行 sc delete mysql 得到 [SC] DeleteService 成功 后&#xff08;也可能不会有返回信息&#xff…
阅读更多...
Oracle 中ROW_NUMBER() OVER()函数用法详解

Oracle 中ROW_NUMBER() OVER()函数用法详解

select * from ( select t.data maxdata, datatime,s.xlmc,ROW_NUMBER() OVER (PARTITION BY s.xlmc ORDER BY datatime) AS rn from HISTORY_FH_ONEDAY t, CURRENT_FH_XL s where t.code s.code ) c where c.rn1
阅读更多...
VSCode 常用的快捷键和技巧系列（2）

VSCode 常用的快捷键和技巧系列（2）

一、如何让VSCode工程树显示图标 第一步&#xff1a;安装 快捷键 CtrlP &#xff0c;输入 ext install vscode-icons &#xff0c;然后点击安装插件 第二步&#xff1a;配置 安装成功后&#xff0c;点击Reload重新加载。 然后配置&#xff0c;当前图标使用VsCode-Icons Go…
阅读更多...
喜报｜亚数荣获“2023物联网场景应用品牌企业”奖项

喜报｜亚数荣获“2023物联网场景应用品牌企业”奖项

12月5日至6日&#xff0c;以“物联中国 数智雄安”为主题的“千企雄安行&#xff1a;2023物联网产业品牌大会”在雄安新区举办。 大会由雄安新区管理委员会、中关村发展集团股份有限公司、物联中国团体组织联席会主办&#xff0c;雄安新区投资促进服务中心、北京物联网智能技术…
阅读更多...
【LeetCode刷题】-- 229.多数元素II

【LeetCode刷题】-- 229.多数元素II

229.多数元素II 方法&#xff1a;使用哈希表 class Solution {public List<Integer> majorityElement(int[] nums) {HashMap<Integer,Integer> map new HashMap<>();for(int i 0;i< nums.length;i){map.put(nums[i],map.getOrDefault(nums[i],0) 1);}…
阅读更多...
【K8S基础】-k8s的核心概念pod

【K8S基础】-k8s的核心概念pod

一、Pod 是什么 1.1 Pod 的定义和概念 在Kubernetes中&#xff0c;Pod是创建或部署的最小/最简单的基本单位。一个Pod代表着集群上正在运行的一个进程&#xff0c;它封装了一个或多个应用容器&#xff0c;并且提供了一些共享资源&#xff0c;如网络和存储&#xff0c;每个Pod…
阅读更多...
c语言：判断闰年｜练习题

c语言：判断闰年｜练习题

一、题目 输入一个年份&#xff0c;判断该年份是否闰年 二、解题思路 闰年的判断方法 【】普通闰年&#xff1a; 公历年份是4的倍数&#xff0c;且不是100的倍数 【】世纪闰年&#xff1a; 公历年份是整百数的年份&#xff0c;需是400的倍数 三、代码图片【带注释】 四、源代码…
阅读更多...
数组去重及去除指定值，每一个对象添加属性值

数组去重及去除指定值，每一个对象添加属性值

1、数组去重ES6写法 Set() // 数组去重 let arr [1,2,4,6,3,2,6,7,7,2,9,0,1,5] arr [...new Set(arr)] console.log(arr); 2、数组去除指定值 filter() // 数组去除指定值 let arr [1,2,4,6,3,2,6,7,7,2,9,0,1,5] const num 7 arr arr.filter(item>item!num) cons…
阅读更多...
详解YOLOv5网络结构/数据集获取/环境搭建/训练/推理/验证/导出/部署

详解YOLOv5网络结构/数据集获取/环境搭建/训练/推理/验证/导出/部署

一、本文介绍 本文给大家带来的教程是利用YOLOv5训练自己的数据集&#xff0c;以及有关YOLOv5的网络结构讲解/数据集获取/环境搭建/训练/推理/验证/导出/部署相关的教程&#xff0c;同时通过示例的方式让大家来了解具体的操作流程&#xff0c;过程中还分享给大家一些好用的资源…
阅读更多...
OpenAI 偷偷在训练 GPT-4.5！？

OpenAI 偷偷在训练 GPT-4.5！？

最近看到有人已经套路出 ChatGPT 当前的版本&#xff0c;回答居然是 gpt-4.5-turbo&#xff1a; 实际试验下&#xff0c;用 starflow.tech&#xff0c;切换到小星 4 全能版&#xff08;同等官网最新 GPT-4&#xff09;&#xff0c;复制下面这段话问它&#xff1a; What is the…
阅读更多...
olap/clickhouse-编译器优化与向量化

olap/clickhouse-编译器优化与向量化

本文主要结合15721和clickhouse源码来聊聊向量化&#xff0c;正好我最近也在用Eigen做算子加速&#xff0c;了解下还是有好处的。 提示编译器 提示编译器而不是复杂化简单的代码 什么时候使用汇编&#xff0c;什么时候使用SIMD&#xff1f;下面有几个基本原则&#xff1a; …
阅读更多...
打卡打卡打卡

打卡打卡打卡

12.19
阅读更多...
零基础自学C语言|字符函数和字符串函数

零基础自学C语言|字符函数和字符串函数

在编程的过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;为了方便操作字符和字符串&#xff0c;C语言标准库中提供了一系列库函数&#xff0c;接下来我们就学习一下这些函数。 &#x1f4cc;字符分类函数 C语言中有一系列的函数是专门做字符分类的&#xff0c;也就…
阅读更多...
对私域的认知，决定了你的私域能做多久！

对私域的认知，决定了你的私域能做多久！

现在&#xff0c;大部分企业对私域的认知是扭曲的。 比如&#xff0c;说到做私域&#xff0c;很多企业都是忙着往企业微信拉人&#xff0c;做自己的小程序商城来卖货。大多数企业就这样把私域当成了企业的独有“淘宝天猫”&#xff0c;这样做私域&#xff0c;可能会带来短期GM…
阅读更多...
在 Windows 上安装并配置 dig命令 的步骤

在 Windows 上安装并配置 dig命令 的步骤

介绍&#xff1a;dig 是一个网络工具&#xff0c;通常在 Unix 和类 Unix 系统上使用&#xff0c;用于查询 DNS&#xff08;域名系统&#xff09;信息。它可以用来获取域名相关的信息&#xff0c;比如 IP 地址、域名服务器的记录等。你可以使用 dig 命令来进行域名解析、查找特定…
阅读更多...
DALL-E 系列：AI绘画背后的惊人真相！！【1个离奇内幕、3个意想不到、5大秘密揭示】

DALL-E 系列：AI绘画背后的惊人真相！！【1个离奇内幕、3个意想不到、5大秘密揭示】

DALL-E 系列&#xff1a;AI绘图原理&#xff0c;根据用户给出的描述&#xff0c;生成与描述相匹配的图像 DALL-E 1dVAETransformer DALL-E 2CLIP先验 priordecoder&#xff08;image&#xff09; DALL-E 3 论文地址&#xff1a;https://arxiv.org/pdf/2102.12092.pdf DALL-E 的…
阅读更多...
Android 原始方法实现Tablayout样式

Android 原始方法实现Tablayout样式

源码&#xff1a; 【免费】Android原始方法实现Tablayout样式资源-CSDN文库 推荐&#xff1a; GitHub - hackware1993/MagicIndicator: A powerful, customizable and extensible ViewPager indicator framework. As the best alternative of ViewPagerIndicator, TabLayout …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023