当前位置：首页 > news >正文

Vue2 插槽 Slot

news 来源：原创 2025/8/25 3:22:53

提示：插槽的目的是让我买原来的设备具备更多的扩展性。

文章目录

前言
在组件中定义插槽（子组件视角）
- 1. 默认插槽
- 2. 具名插槽（带名称的插槽）
- 3. 作用域插槽（带数据的插槽）
使用插槽（父组件视角）
- 1. 使用默认插槽
- 2. 使用具名插槽（案例解析）
- 3. 使用作用域插槽
JeecgBoot 案例深度解析
- 原代码片段：
- 实现机制：
完整示例：带作用域的表格组件
- 子组件定义：
- 父组件使用：
插槽与 Props 的对比
最佳实践建议

前言

提示：这里可以添加本文要记录的大概内容：

插槽用于组件内容分发，实现父组件向子组件传递模板内容

插槽（Slot） 是 Vue 组件化开发中用于内容分发的机制，它允许父组件向子组件传递模板片段，实现组件内容的动态组合。通过插槽可以实现：

内容定制：父组件可自定义子组件的部分内容
结构复用：保持组件核心逻辑的同时提供布局灵活性
作用域控制：子组件可向插槽传递数据（作用域插槽）

在组件中定义插槽（子组件视角）

1. 默认插槽

<!-- 子组件 ChildComponent.vue -->
<template><div class="container"><!-- 默认插槽位置 --><slot><!-- 默认内容（可选） --><p>当父组件不提供内容时显示这个默认文本</p></slot></div>
</template>

2. 具名插槽（带名称的插槽）

<!-- 子组件 JSelectBizComponent.vue -->
<template><a-col class="left"><!-- 具名插槽 --><slot name="left"><!-- 默认内容 --><a-select .../></slot></a-col>
</template>

3. 作用域插槽（带数据的插槽）

<!-- 子组件 ScopedComponent.vue -->
<template><div><slot name="item" :itemData="internalData" :index="currentIndex"></slot></div>
</template>

使用插槽（父组件视角）

1. 使用默认插槽

<!-- 父组件 ParentComponent.vue -->
<child-component><!-- 插入默认插槽的内容 --><h2>自定义标题</h2><p>自定义内容</p>
</child-component>

2. 使用具名插槽（案例解析）

<!-- 父组件使用 JSelectBizComponent -->
<j-select-biz-component><!-- #left 对应子组件的 name="left" 插槽 --><template #left><!-- 覆盖默认的 a-select --><a-input placeholder="自定义输入框" /><a-button type="primary">搜索</a-button></template>
</j-select-biz-component>

3. 使用作用域插槽

<!-- 父组件使用 ScopedComponent -->
<scoped-component><template #item="slotProps"><!-- 使用子组件传递的数据 --><p>索引：{{ slotProps.index }}</p><p>数据：{{ slotProps.itemData }}</p></template>
</scoped-component>

JeecgBoot 案例深度解析

原代码片段：

<!-- JSelectBizComponent 组件 -->
<template><a-col class="left"><slot name="left"><a-select ...></a-select></slot></a-col>
</template>

实现机制：

插槽定义：通过 <slot name="left"> 定义具名插槽
默认内容：当父组件不提供插槽内容时，显示 <a-select> 组件
插槽覆盖：父组件可以通过 #left 完全替换默认内容
样式控制：通过 CSS 类 .left 控制布局样式

完整示例：带作用域的表格组件

子组件定义：

<!-- SmartTable.vue -->
<template><a-table :dataSource="data"><template v-for="col in columns" :slot="col.slotName"><slot :name="col.slotName" :column="col" :record="col.record" :text="col.text"></slot></template></a-table>
</template>

父组件使用：

<smart-table :columns="columns"><template #action="scope"><a-button @click="handleEdit(scope.record)">编辑</a-button><a-button @click="handleDelete(scope.record.id)">删除</a-button></template><template #status="scope"><a-tag :color="scope.text | statusColor">{{ scope.text | statusText }}</a-tag></template>
</smart-table>

插槽与 Props 的对比

特性	插槽（Slot）	Props
内容类型	模板片段（HTML/组件）	数据（字符串/数字/对象等）
使用场景	结构定制	数据传递
作用域	可使用子组件数据（作用域插槽）	父组件单向传递
动态性	高	中等

最佳实践建议

合理命名：使用语义化的插槽名称（如 #header、#footer）
默认内容：为常用插槽提供合理的默认实现
作用域控制：当需要子组件数据时使用作用域插槽
适度使用：避免过度使用插槽导致组件结构复杂化
样式隔离：通过 CSS Scoped 或 BEM 规范管理插槽样式

通过以上方式，可以充分利用 Vue 的插槽机制，构建出高复用性、灵活可定制的组件体系，这在类似 JeecgBoot 这类需要高度可配置性的后台管理系统中尤为重要。

Vue2 插槽 Slot

提示：插槽的目的是让我买原来的设备具备更多的扩展性。文章目录前言在组件中定义插槽（子组件视角）1. 默认插槽2. 具名插槽（带名称的插槽）3. 作用域插槽（带数据的插槽） 使用插槽（父…...

编程日记 2025/8/25 3:22:53

关于sqlsugar实体多层List映射的问题

如上图所示，当一个主表（crm_fina_pay_req）的子表list<文件附件关系表>（ List<crm_fina_payreq_evidofpay_relation> ）中，还包含有sysfile（SysFile SysFiles）类型的文件信…...

编程日记 2025/8/25 3:21:27

使用stm32cubeide stm32f407 lan8720a freertos lwip 实现udp client网络数据转串口数据过程详解

1前言项目需要使用MCU实现网络功能，后续确定方案stm32f407 外接lan8720a实现硬件平台搭建，针对lan8720a也是用的比较多的phy，网上比较多的开发板，硬件上都是选用了这个phy，项目周期比较短，选用了这个常用…...

编程日记 2025/8/23 10:31:29

LangChain4j（4）：预设角色(系统消息SystemMessage)

1 预设角色(系统消息SystemMessage) 基础大模型是没有目的性的， 你聊什么给什么，但是如果我们开发的事一个智能票务助手， 我需要他以一个票务助手的角色跟我对话， 并且在我跟他说”退票”的时候， 让大模型一定要告诉我…...

编程日记 2025/8/25 3:19:46

自然语言处理利器NLTK：从入门到核心功能解析

文章目录一、NLP领域的基石工具包二、NLTK核心模块全景解析1 数据获取与预处理2 语言特征发现3 语义与推理三、设计哲学与架构优势1 四维设计原则2 性能优化策略四、典型应用场景1 学术研究2 工业实践五、生态系统与未来演进一、NLP领域的基石工具包自然语言工具包&…...

编程日记 2025/8/22 16:08:08

常见接口协议介绍

1. I2C（Inter-Integrated Circuit） 定义：两线制串行总线（SDA数据线 SCL时钟线），支持主从模式多设备通信。特点： 地址机制：每个设备有唯一地址，主设备通过地址选择从设备…...

编程日记 2025/8/21 11:33:28

宝塔面板使用CDN 部署后获取真实客户端 IP教程

在宝塔面板环境中配置 CDN 加速服务后，服务器日志默认记录的是 CDN 节点 IP，这给网站流量分析带来不便。本文将为您提供多种解决方案，帮助您在 CDN 生效的同时获取真实访客 IP。一、Nginx 配置调整方案日志格式优化在宝塔面板中打开 Ngi…...

编程日记 2025/8/20 22:15:47

生鲜果蔬便利店实体零售门店商城小程序

——线上线下融合赋能社区零售新生态随着新零售模式的深化和消费者需求的升级，生鲜果蔬便利店亟需通过数字化工具实现经营效率与用户体验的双重提升。结合线下实体门店与线上商城的一体化小程序，成为行业转型的核心工具。以下从功能模块、运营策略及行…...

编程日记 2025/8/24 8:50:09

C++（初阶）（十）——vector模拟实现

vector vector构造尾插（删）和扩容inert（插入）迭代器失效erase（删除）resize（调整空间）深浅拷贝迭代器拷贝和赋值（v2(v1)和v1 v3）多个数据插入迭代器区间初始化…...

编程日记 2025/8/20 19:43:04

利用解析差异SSRF + sqlite注入 + waf逻辑漏洞 -- xyctf 2025 fate WP

本文章附带TP(Thinking Process)! #!/usr/bin/env python3 # 导入所需的库 import flask # Flask web框架 import sqlite3 # SQLite数据库操作 import requests # HTTP请求库 import string # 字符串处理 import json # JSON处理app flask.Flask(__name__) # 创建Flask应…...

编程日记 2025/8/22 16:05:36

VScode无法激活conda虚拟环境，不显示虚拟环境名称

在VScode中终端中激活环境时出现下面的情况 PS F:\Model\stMMR-main> conda activate env_mamba usage: conda-script.py [-h] [--no-plugins] [-V] COMMAND ... conda-script.py: error: argument COMMAND: invalid choice: activate (choose from clean, compare, config…...

编程日记 2025/8/25 3:22:39

vscode Colipot 编程助手

1、登录到colipot，以github账号，关联登录点击【continue】按钮，继续。点击【打开Visual Studio Code】，回到vscode中。 2、问一下11? 可以看出，很聪明，一下子就算出来了。 3、帮我们写一个文件&#xf…...

编程日记 2025/8/25 3:19:41

vscode中REST Client插件

最近发现vscode中REST Client插件也可以测试接口简介在 VS Code 中，REST Client 是一个非常受欢迎的插件，用于测试和调试 RESTful API。以下是关于该插件的安装、使用和功能的详细介绍： 安装 REST Client 插件打开 VS Code。点击左侧的扩…...

编程日记 2025/8/17 23:07:54

路由器工作在OSI模型的哪一层？

路由器主要工作在OSI模型的第三层，即网络层。网络层的主要功能是将数据包从源地址路由到目标地址，路由器通过检查数据包中的目标IP地址，并根据路由表确定最佳路径来实现这一功能。路由器的主要功能： a、路由决策：路…...

编程日记 2025/8/21 22:19:15

（PROFINET 转 EtherCAT）EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

型号协议转换通信网关 PROFINET 转 EtherCAT MS-GW31 概述 MS-GW31 是 PROFINET 和 EtherCAT 协议转换网关，为用户提供两种不同通讯协议的 PLC 进行数据交互的解决方案，可以轻松容易将 EtherCAT 网络接入 PROFINET 网络中，方便扩展&…...

编程日记 2025/8/19 7:20:43

【教程】MacBook 安装 VSCode 并连接远程服务器

目录需求步骤问题处理需求在 Mac 上安装 VSCode，并连接跳板机和服务器。步骤 Step1：从VSCode官网（https://code.visualstudio.com/download）下载安装包： Step2：下载完成之后，直接双击就能…...

编程日记 2025/8/25 3:20:36

Solidity基础入门—web3

Remix介绍官网地址 Remix 是一个基于浏览器的 Solidity 开发环境，主要用于编写、测试、调试和部署以太坊智能合约。 Solidity基本数据类型类型说明示例uint / int无符号 / 有符号整数uint256, int8, int256bool布尔类型（true / false）bo…...

编程日记 2025/8/22 7:02:19

微信小程序 request 流式数据处理

什么是流式数据处理？ 流式数据处理（Streaming Data）指逐步接收并处理数据片段的技术，无需等待全部数据加载完成。适用于大文件下载、实时日志、AI生成报告等场景，可显著降低内存占用并提升用户体验。微信小程序中的…...

编程日记 2025/8/25 3:20:35

Kotlin与HttpClient编写视频爬虫

想用Apache HttpClient库和Kotlin语言写一个视频爬虫。首先，我需要确定用户的具体需求。视频爬虫通常涉及发送HTTP请求，解析网页内容，提取视频链接，然后下载视频。可能需要处理不同的网站结构，甚至可能需要处理动态加载…...

编程日记 2025/8/17 22:13:43

数据结构：通俗解释AOE 网中事件的最早发生时间和最迟发生时间

1. 事件的最早发生时间在 AOE 网（Activity On Edge Network，边表示活动的网络）中，事件的最早发生时间指从源点（起点）到该事件结点的最长路径长度（即所需时间）。它决定了所有以该事…...

编程日记 2025/8/19 5:04:27

爬虫中遇到的问题

网页假请求导致的阻塞可以在requests请求当中添加timeout参数，来让网站重新请求在爬虫请求中，timeout参数的主要作用是控制请求的最大等待时间，避免因服务器响应缓慢或网络问题导致程序长时间阻塞，从而提升爬虫的效率和稳定性…...

编程日记 2025/8/21 1:37:55

聊一聊没有接口文档时如何开展测试

目录一、前期准备与信息收集二、使用抓包工具分析接口三、逆向工程构造测试用例四、安全测试五、模糊测试（Fuzz Testing） 六、记录并维护发现的接口信息七、推动团队规范流程其它注意事项在我们进行接口测试时，总会遇到各种…...

编程日记 2025/8/25 3:20:35

第一部分：MCP协议与多智能体系统基础-第1课：MCP服务协议核心架构解析

以下是为《MCP服务协议核心架构解析》设计的课件内容，采用“概念解析→代码实践→运行验证”三段式教学结构，结合可视化图表与可运行代码示例，增强学生对MCP协议核心组件的理解与实操能力： 一、课程导入：MCP协议定位与…...

编程日记 2025/8/22 5:11:56

WEB安全--内网渗透--捕获NET-NTLMv2 Hash

一、前言在LM&NTLM基础篇中我们了解到了NTLM协议的流程与加密的方式，以及具体的在type3的response中Net-ntlm hash v2的生成方式。思考： 如果我们入侵的服务器中有域管理员的登录后的密码缓存，那就能用工具（mimikatz&…...

编程日记 2025/8/25 3:22:20

使用 J-Flash 读取芯片 Flash 数据的方法

基本读取步骤硬件连接确保 J-Link 调试器正确连接到目标板给目标板供电（可通过 J-Link 供电或外部电源） 创建/打开项目启动 J-Flash 软件选择 "File" > "New Project" 创建新项目选择正确的目标芯片型号（或…...

编程日记 2025/8/25 3:20:36

Spring MVC 返回 JSON 视图的方式及对比(6种）

Spring MVC 返回 JSON 视图的方式及对比（新增 MappingJackson2JsonView） 1. 方式一：ResponseBody 注解作用：直接返回对象，由消息转换器（如 Jackson）序列化为 JSON。适用场景：简单…...

编程日记 2025/8/24 11:59:27

SpringMVC的数据响应

1)页面跳转直接返回字符串通过ModelAndView对象返回 //方式三(model和view拆开)RequestMapping("/quick4")public String save4(Model model){model.addAttribute("username","lisi3");return "success";}//方式二RequestMapping(&…...

编程日记 2025/8/20 13:00:25

GraphRAG与知识图谱

一、GraphRAG介绍 1.1 什么是 Graph RAG？ Graph RAG（Retrieval-Augmented Generation），是一种基于知识图谱的检索增强技术， 通过构建图模型的知识表达，将实体和关系之间的联系用图的形式进行展示&#xff…...

编程日记 2025/8/22 7:34:24

hive通过元数据库删除分区操作步骤

删除分区失败： alter table proj_60_finance.dwd_fm_ma_kpi_di_mm drop partition(year2025,month0-3,typeADJ); 1、查询分区的DB_ID、TBL_ID – 获取数据库ID-26110 SELECT DB_ID FROM DBS WHERE NAME ‘proj_60_finance’; – 获取表ID-307194 SELECT TBL_ID FR…...

编程日记 2025/8/22 8:00:34

LINUX 5 cat du head tail wc 计算机拓扑结构计算机网络服务器计算机硬件

计算机网络计算机拓扑结构计算机按性能指标分：巨型机、大型机、小型机、微型机。大型机、小型机安全稳定，小型机用于邮件服务器 Unix系统。按用途分：专用机、通用机计算机网络：局域网‘、广域网通信协议’ 计算机终端、客户端…...

编程日记 2025/8/22 11:36:37

flink 增量快照同步文件引用关系和恢复分析

文章目录文件引用分析相关代码分析从state 恢复，以rocksdb为例不修改并行度修改并行度keyGroupRange过程问题文件引用分析每次生成的checkpoint 里都会有所有文件的引用信息问题，引用分析里如何把f1,f2去掉了，可以参考下面的代码&#…...

编程日记 2025/8/23 8:14:58

属性修改器 (AttributeModifier)

主页面设置组件 import { MyButtonModifier } from ../datastore/MyButtonModifier;Entry ComponentV2 struct MainPage {// 支持用状态装饰器修饰，行为和普通的对象一致Local modifier: MyButtonModifier new MyButtonModifier();build() {Column() {Button(&quo…...

编程日记 2025/8/23 11:19:43

汽车BMS技术分享及其HIL测试方案

一、BMS技术简介在全球碳中和目标的战略驱动下，新能源汽车产业正以指数级速度重塑交通出行格局。动力电池作为电动汽车的"心脏"，其性能与安全性不仅直接决定了车辆的续航里程、使用寿命等关键指标，更深刻影响着消费者对电动汽车的…...

编程日记 2025/8/21 21:10:41

电网电能质量分析：原理、算法及实际应用

一、引言在现代社会，电力供应的稳定性和可靠性对工业生产、社会生活的各个方面都至关重要。电能质量作为衡量电力系统供电能力的关键指标，其优劣直接影响到电力设备的运行效率、使用寿命以及生产过程的稳定性。随着电力系统规模的不断扩大，新…...

编程日记 2025/8/22 22:49:24

PyCharm Community社区版链接WSL虚拟环境

#记录工作在过去，PyCharm Community Edition（社区版）不具备链接 WSL 虚拟环境的功能，该功能仅在 PyCharm Professional（专业版）和企业版中提供。如今，从 PyCharm Community Edition 2024.3.5 …...

编程日记 2025/8/22 20:17:52

2026考研数学张宇武忠祥复习视频课，高数基础班+讲义PDF

2026考研数学武忠祥老师课（网盘）：点击下方链接 2026考研数学武忠祥网课（最新网盘） 一、基础阶段（3-5个月） 目标：搭建知识框架掌握基础题型教材使用： 高数：…...

编程日记 2025/8/21 2:41:25

Spring Boot嵌入前端静态资源：从原理到实战的完整指南

在Java Spring Boot项目中集成前端静态资源是构建现代Web应用的必备技能。本文将深入解析Spring Boot的静态资源处理机制，通过实战案例演示完整的集成流程，并分享性能优化与安全加固的最佳实践。一、Spring Boot静态资源处理原理 1.1 默认资源路径 S…...

编程日记 2025/8/23 18:38:06

DeepSeek对比ChatGPT有何改进，可以用更低成本计算

下面是基于DeepSeek公开论文和代码，与ChatGPT对比后总结的改进点，以及其为何能用更少算力训练大模型的解析。 https://arxiv.org/pdf/2412.19437 1. 改进点对比 1.1 架构稀疏化与混合专家（MoE）设计 DeepSeek采用稀疏激活与混合…...

编程日记 2025/8/21 16:40:42

JavaScript双问号操作符（??）详解，解决使用 || 时因类型转换带来的问题

目录 JavaScript双问号操作符（??）详解，解决使用||时因类型转换带来的问题一、双问号操作符??的基础用法 1、传统方式的痛点 2、双问号操作符??的精确判断 3、双问号操作符??与逻辑或操作符||的对比二、复杂场景下的空值处理 …...

编程日记 2025/8/17 22:13:50

Go语言从零构建SQL数据库(5)-Pratt解析算法：SQL表达式解析的核心引擎

Pratt解析算法：SQL表达式解析的核心引擎 1. 算法概述与工作原理 Pratt解析算法（自顶向下运算符优先级解析）是一种优雅的表达式解析方法，特别适合处理具有不同优先级运算符的复杂表达式。在我们的SQL解析器中，它负责解…...

编程日记 2025/8/22 10:38:26

数字政府与电子政务综合分析报告

数字政府与电子政务综合分析报告一、引言随着信息技术的飞速发展，数字政府和电子政务成为全球公共管理领域的重要趋势。数字政府和电子政务的建设不仅是提升政府治理能力的必然选择，也是推动国家治理现代化的重要途径。本文将对数字政府和电子政务进…...

编程日记 2025/8/21 21:28:57

服务器虚拟化技术深度解析：医药流通行业IT架构优化指南

一、服务器虚拟化的定义与原理 （一）技术定义：从物理到虚拟的资源重构服务器虚拟化是通过软件层（Hypervisor）将物理服务器的CPU、内存、存储、网络等硬件资源抽象为逻辑资源池，分割成多个相互隔离的虚拟机…...

编程日记 2025/8/23 13:07:14

QT ARM 开发环境搭建

搭建 QT ARM 开发环境主要包括主机环境配置、交叉编译工具链安装、QT 库交叉编译和 QT Creator 配置几个步骤。以下是详细流程：一. 主机环境准备系统要求推荐 Ubuntu 18.04/20.04 LTS 或更高版本至少 50GB 可用磁盘空间 8GB 以上内存安装基础依赖 sudo apt update sud…...

编程日记 2025/8/21 11:27:57

【设计模式】外观模式

简介想象你要在家里看电影，需要做以下操作： 打开电视启动音响调暗灯光关闭窗帘如果每次都要手动操作这些步骤会很麻烦。外观模式可以帮你将这些步骤封装成一个统一的接口，比如“一键观影模式”，你只需按一个按钮，…...

编程日记 2025/8/23 5:09:19

[特殊字符] 驱动开发硬核特训 · Day 5 - 深入解析 Platform Driver 驱动框架

主题：深入解析 Platform Driver 驱动框架 —— 从架构设计到工程实战平台驱动（platform driver）是 Linux 内核中应用最广泛的一种设备驱动框架。它用于管理那些不依赖总线枚举机制的固定外设，如 GPIO 控制器、I2C 控制器、SPI 控…...

编程日记 2025/8/21 1:56:18

创意 Python 爱心代码

在编程的世界里，Python 以其简洁易用和丰富的库而备受喜爱。用 Python 编写爱心代码，不仅能展现编程的魅力，还能传递温暖与爱意。今天就来分享几种创意 Python 爱心代码。一、基于turtle库绘制爱心 turtle库是 Python 内置的图形库&#x…...

编程日记 2025/8/25 0:33:29

【群晖】挂载小雅alist到AList网盘中

群晖开启远程在命令行远程到主机 ssh 用户名主机名终端中执行下方命令创建一个在AList中挂载小雅所需要的token： docker exec -i xiaoya sqlite3 data/data.db <<EOF select value from x_setting_items where key "token"; EOF 如果报权限错误…...

编程日记 2025/8/23 1:51:41