【vue3|第29期】Vue3中的插槽:实现灵活的组件内容分发

日期:2024年10月24日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉在这里插入代码片有所帮助,帮忙点个赞,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006

说在最前面:本文 vue3 的示例代码,在没有另外声名的情况下,均采用 <script setup> 组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^


文章目录

  • 一、前言
  • 二、插槽分类
    • 1、 默认插槽(Default Slot)
    • 2、 具名插槽(Named Slots)
    • 3、 作用域插槽(Scoped Slots)
  • 三、完整示例
  • 四、结语


在这里插入图片描述


一、前言


Vue3 中,插槽(Slots 是一种允许开发者在组件内部定义可替换内容的机制。即通过插槽,开发者在组件内部预留“空白区”,供父组件填充自定义内容。这不仅增强了组件的通用性和复用性,还实现了父组件对子组件内容的精确控制。

二、插槽分类


1、 默认插槽(Default Slot)

默认插槽(也称为匿名插槽,无名插槽)是最常见的插槽类型,用于放置普通的 HTML 内容或子组件。如果一个组件没有指定具名插槽,那么所有的内容都会被视为默认插槽的内容。

假设我们有一个子组件 ChildComponent.vue,它包含一个默认插槽:

<template><div><h2>我是子组件的标题</h2><slot></slot> <!-- 默认插槽 --></div>
</template>

在父组件中,我们可以这样使用它:

<template><ChildComponent><p>这是通过默认插槽插入的内容</p ></ChildComponent>
</template>

渲染后的HTML结构将是:

<div><h2>我是子组件的标题</h2><p>这是通过默认插槽插入的内容</p >
</div>

2、 具名插槽(Named Slots)

允许在组件中定义多个插槽,并为每个插槽指定一个唯一的名称。父组件可以通过 v-slot 指令指定内容应该渲染到哪个具名插槽中。在 Vue3 中,也可以使用 # 来简化 v-slot 指令,像 <template #header> 这样的写法。

当我们需要在一个组件中定义多个插槽时,具名插槽就派上用场了。下面是一个包含头部和尾部具名插槽的子组件:

<template><div><header><slot name="header"></slot> <!-- 具名插槽 --></header><main><slot></slot> <!-- 默认插槽 --></main><footer><slot name="footer"></slot> <!-- 具名插槽 --></footer></div>
</template>

在父组件中,我们可以这样插入内容:

<template><ChildComponent><template v-slot = "header"><h1>这是头部具名插槽的内容</h1></template><p>这是默认插槽的内容</p ><template #footer><p>这是尾部具名插槽的内容</p ></template></ChildComponent>
</template>

渲染后的HTML结构将是:

<div><header><h1>这是头部具名插槽的内容</h1></header><main><p>这是默认插槽的内容</p ></main><footer><p>这是尾部具名插槽内容</p ></footer>
</div>

3、 作用域插槽(Scoped Slots)

允许父组件访问子组件的数据。通过在子组件的插槽上定义属性,父组件可以接收这些属性,并在插槽内容中使用它们。

作用域插槽允许子组件向父组件传递数据,父组件可以根据这些数据来决定如何渲染内容。下面是一个简单的例子:

子组件 ChildComponent.vue

<template><div><slot :user="user"></slot> <!-- 作用域插槽 --></div>
</template><script setup>
import { ref } from 'vue';const user = ref({ name: 'Commas', age: 30 });
</script>

在父组件中,我们可以这样使用作用域插槽:

<template><ChildComponent v-slot:default="slotProps"><p>用户名: {{ slotProps.user.name }}</p ><p>年龄: {{ slotProps.user.age }}</p ></ChildComponent>
</template>

渲染后的HTML结构将是:

<div><p>用户名: Commas</p ><p>年龄: 30</p >
</div>

三、完整示例

假设我们要创建一个 可自定义的按钮组件(Button.vue),它包含主文本图标两个部分,如下所示:

<!-- Button.vue -->
<script setup>
import { ref } from 'vue';
</script><template><div class="button"><slot name="text">默认文本</slot><slot name="icon"><!-- 默认图标 --><i class="material-icons">add</i></slot></div>
</template>

父组件使用:

<template><Button><template #text>定制文本</template><template #icon><i class="material-icons">delete</i></template></Button>
</template>

四、结语


通过本文的探讨,我们不仅领略了 Vue3 插槽的强大功能,更深入理解了其在构建高性能、高复用性 UI 组件中的关键作用。通过默认插槽、具名插槽和作用域插槽,开发者可以定义组件的结构,并允许父组件自定义这些结构。这些机制使得Vue组件更加灵活和可重用。


参考文章:

  • 《Vue 3 官方文档 - 插槽》
  • 《Vue Composition API - 使用指南》

版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/143206817

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

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

相关文章

【分立元件】低阻值电阻器的趋势(Face down type)

低阻值电阻器不仅可正确显示电阻器的阻值,还是小型、大功率产品或散热性优良的产品所必不可少的。 为了应对大功率或提高散热性,一般使用较大贴片尺寸的产品或长边电极型产品。 但是,如果贴片尺寸变大,就需要一定的贴装空间,还会减弱温度循环试验强度。 长边电极型…

利用Docker搭建一套Mycat2+MySQL8一主一从、读写分离的最简单集群(保姆教程)

文章目录 1、Mycat介绍1.1、mycat简介1.2、mycat重要概念1.3、Mycat1.x与Mycat2功能对比1.2、主从复制原理 2、前提准备3、集群规划4、安装和配置mysql主从复制4.1、master节点安装mysql8容器4.2、slave节点安装mysql8容器4.2、配置主从复制4.3、测试主从复制配置 5、安装mycat…

yolov11的onnx模型C++ 调用

yolov11的onnx模型C调用 效果图一、python调用二、onnx模型导出三、python的onnx调用调用检测模型调用分割模型 四、C的onnx模型调用五 、视频流的检测后续 效果图 一、python调用 本文只记录生成的yolov11模型如何调用&#xff0c;其他可参考各种yolov11博客 模型下载&#x…

万年历制作

#include<stdio.h> int main() { int year0, month0, day0, y0, m0&#xff1b; scanf_s("%d %d", &year,&month); //判断闰年 for(y1900;y<year;y) { if ((y % 4 0 && y % 100 ! 0) || y % 400 0) …

C语言[求x的y次方]

C语言——求x的y次方 这段 C 代码的目的是从用户输入获取两个整数 x 和 y &#xff0c;然后计算 x 的 y 次幂&#xff08;不过这里有个小错误&#xff0c;实际计算的是 x 的 (y - 1) 次幂&#xff0c;后面会详细说&#xff09;&#xff0c;最后输出结果。 代码如下: #include…

Apache Paimon Catalog

Paimon Catalog可以持久化元数据&#xff0c;当前支持两种类型的metastore&#xff1a; 文件系统&#xff08;默认&#xff09;&#xff1a;将元数据和表文件存储在文件系统中。hive&#xff1a;在 hive metastore中存储元数据。用户可以直接从 Hive 访问表。 2.2.1 文件系统…

centeros7 编译ffmpeg

使用yum安装的路似乎已经堵住了&#xff0c;请求的镜像全是404或503 1.打开终端并使用yum安装EPEL存储库(Extra Packages for Enterprise Linux)&#xff1a;sudo yum install epel-release2.接下来&#xff0c;使用以下命令来安装FFmpeg&#xff1a;sudo yum install ffmpeg …

remote: HTTP Basic: Access denied

解决方法 输入&#xff1a; git config --system --unset credential.helper 再次进行 Git 操作&#xff0c;输入正确的用户名&#xff0c;密码即可。

static、 静态导入、成员变量的初始化、单例模式、final 常量(Content)、嵌套类、局部类、抽象类、接口、Lambda、方法引用

static static 常用来修饰类的成员&#xff1a;成员变量、方法、嵌套类 成员变量 被static修饰&#xff1a;类变量、成员变量、静态字段 在程序中只占用一段固定的内存&#xff08;存储在方法区&#xff09;&#xff0c;所有对象共享可以通过实例、类访问 (一般用类名访问和修…

OpenHarmony(1)开发环境搭建

一&#xff1a;开源项目 OpenHarmony是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;目标是面向全场景、全连接、全智能时代&#xff0c;基于开源的方式&#xff0c;搭建一个智能终端设备操作系统的框架和平台&#xff0…

使用SQL在PostGIS中创建各种空间数据

#1024程序员节&#xff5c;征文# 一、目录 1. 概述 2. 几何&#xff08;Geometry&#xff09;类型 创建点 创建线 创建面 3. 地理&#xff08;Geography&#xff09;类型 地理点&#xff08;GEOGRAPHY POINT&#xff09; 地理线串&#xff08;GEOGRAPHY LINESTRING&#xff…

Redis 单机、主从、哨兵和集群架构详解和搭建

目录 前言 单机部署 检查安装 gcc 环境 下载安装 Redis 启动 Redis 关闭 Redis 配置Redis 主从部署 整体架构图 主从复制配置 重启 Redis 验证 主从复制的作⽤ 主从复制缺点 哨兵部署&#xff08;Sentinel&#xff09; 整体架构图 哨兵模式配置 启动哨兵 验证…

MySQL-32.索引-操作语法

一.语法 二.代码实现 指定某个字段为主键&#xff0c;其实就是建立一个主键索引。而指定某个字段唯一&#xff0c;就是建立一个唯一索引。 -- 索引 -- 创建&#xff1a;为tb_emp表的name字段建立一个索引 create index idx_emp_name on tb_emp(name);-- 查询&#xff1a;查…

【智能大数据分析 | 实验四】Spark实验:Spark Streaming

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…

基于java的山区环境监督管理系统(源码+定制+开发)环境数据可视化、环境数据监测、 环境保护管理 、污染防治监测系统 大数据分析

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

《Python游戏编程入门》注-第3章3

《Python游戏编程入门》的“3.2.4 Mad Lib”中介绍了一个名为“Mad Lib”游戏的编写方法。 1 游戏玩法 “Mad Lib”游戏由玩家根据提示输入一些信息&#xff0c;例如男人姓名、女人姓名、喜欢的食物以及太空船的名字等。游戏根据玩家输入的信息编写出一个故事&#xff0c;如图…

Postgresql 配置数据库表添加主键自增id

#1024程序员节&#xff5c;征文# 在 PostgreSQL 数据库中&#xff0c;如果你想创建一个自增的 ID 字段&#xff0c;通常会使用序列&#xff08;sequence&#xff09;配合默认值或者使用带有自动递增特性的 SERIAL 类型。以下是两种常见的方法来实现自增 ID&#xff1a; 使用 …

【C++】—— 模板进阶

【C】—— 模板进阶 1 非类型模板参数1.1 什么是非类型模板参数1.2 非类型模板参数对比宏的优势1.3 array 简单了解 2 模板的特化2.1 引子2.2 函数模板特化2.3 函数模板特化的坑2.4 类模板的特化2.4.1 全特化2.4.2 偏特化&#xff08;半特化&#xff09;2.4.3 选择2.4.4 偏特化…

Java最全面试题->Java基础面试题->JavaEE面试题->Web应用服务器面试题

文章目录 Web应用服务器面试题Tomcat是什么?Tomcat缺省端口是多少&#xff0c;如何修改&#xff1f;Tomcat 有那几种Connector 运行模式&#xff1f;什么是Servlet&#xff1f;Servlet请求过程&#xff1f;Tomcat执行流程&#xff1f;Tomcat部署方式?什么是JBoss ?在JBoss 7…

FPGA搭建PCIE3.0通信架构简单读写测试,基于XDMA中断模式,提供3套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐我已有的PCIE方案本博客方案的PCIE2.0版本 3、PCIE基础知识4、工程详细设计方案工程设计原理框图XDMA配置及使用XDMA中断模块数据缓存架构用户逻辑Windows版本XDMA驱动安装Linux版本XDMA驱动安装测试应用程序工程源码架构PCIE上板…