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

【Vue.js】插槽通信——具名插槽通信

news 来源：原创 2025/8/21 9:18:44

前景

下面的父子组件代码仍然在Vue.js演练平台直接运行

基本语法

在子组件中定义插槽

<!-- Category.vue -->
<slot name="插槽名称">默认内容</slot>

使用 <slot> 标签定义插槽位置
通过 name 属性给插槽命名
标签内部内容为默认内容（当父组件不提供内容时显示）

在父组件中使用插槽

<!-- App.vue -->
<Category><template #插槽名称><!-- 要插入的内容 --></template>
</Category>

使用 <template> 标签包裹要插入的内容
使用 v-slot:插槽名称 或简写 #插槽名称 指定要插入的插槽

命名规则

插槽名称可以是任意有效的JavaScript标识符
名称区分大小写

默认内容

当父组件不提供插槽内容时，显示子组件中定义的默认内容
提供内容时，默认内容会被覆盖

使用建议

为插槽取有意义的名称，提高代码可读性
合理使用默认内容，增强组件的健壮性
可以使用多个 <template> 块为同一个组件提供不同的插槽内容
简写语法 #插槽名 比 v-slot:插槽名 更简洁

具名插槽的本质：父组件向子组件「精准投喂」内容
当子组件（Category）需要在多个位置接收不同的父组件内容，并且希望结构化地控制内容的插入位置时使用。
具名插槽可以解决以下场景组件复用的痛点：

具体实例

父组件 index.vue

<template><div class="parent-container"><h3>父组件</h3><div class="categories-container"><Category class="category-item"><template #s2><div class="content-box"><h4>士兵类型</h4><ul><li v-for="s in sodierTypes" :key="s.id">{{ s.name }}</li></ul></div></template></Category><Category class="category-item"><template #s1><div class="content-box"><h4>风景图片</h4><img :src="img_url" alt="风景图片" class="responsive-image" /></div></template></Category><Category class="category-item"><template #s3><div class="content-box"><h4>视频展示</h4><video :src="v_url1" controls class="responsive-video" /></div></template></Category></div></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';
import Category from './Category.vue';const v_url1 = ref('https://vod.v.jstv.com/2025/02/04/JSTV_JSGGNEW_1738669283837_9IgYA02_1378.mp4');
const img_url = ref('https://youimg1.c-ctrip.com/target/100n0p000000fnj3g0396.jpg');
const sodierTypes = reactive([{ id: 'zyb', name: '支援兵' },{ id: 'tjb', name: '突击兵' },{ id: 'ylb', name: '医疗兵' },{ id: 'zcb', name: '侦察兵' }
]);
</script>
<style scoped>
.parent-container {padding: 20px;
}.categories-container {display: flex;gap: 20px;margin-top: 20px;flex-wrap: wrap;
}.category-item {flex: 1;min-width: 300px;border: 1px solid #eee;border-radius: 8px;padding: 15px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}.content-box {display: flex;flex-direction: column;gap: 10px;
}.responsive-image {max-width: 100%;height: auto;border-radius: 4px;}
.responsive-video {width: 100%;border-radius: 4px;
}h4 {margin: 0 0 10px 0;color: #333;
}
ul {list-style: none;padding: 0;margin: 0;
}li {padding: 5px 0;border-bottom: 1px solid #f0f0f0;
}li:last-child {border-bottom: none;
}
</style>

子组件 Category.vue

父组件在template标签中定义的插槽名，子组件使用 name属性与父组件对应插槽绑定。

<template><div>
<slot name="s1"></slot>
<slot name="s2"></slot>
<slot name="s3"></slot></div>
</template>
<script setup lang="ts" name="Category">
</script>

作用：定义了三个具名插槽（s1、s2、s3），作为内容占位符。

特点	实现效果
内容精准投放	父组件通过 #s1、#s2、#s3 将不同内容插入子组件的对应位置。
组件高度复用	同一个 Category 组件通过插槽展示完全不同的内容（列表、图片、视频）。
结构清晰	子组件负责布局框架，父组件决定具体内容，职责分离。
灵活组合	父组件可以只填充部分插槽（例如仅用 s1 和 s2，忽略 s3）。

效果

在这里插入图片描述

【Vue.js】插槽通信——具名插槽通信

目录前景基本语法命名规则默认内容使用建议具体实例父组件 index.vue子组件 Category.vue 效果前景下面的父子组件代码仍然在Vue.js演练平台直接运行基本语法在子组件中定义插槽  <slot name"插槽名称">默认内容</slo…...

编程日记 2025/8/21 9:18:44

从设备交付到并网调试：CET中电技术分布式光伏全流程管控方案详解

四月的最后一个工作日，当分布式光伏电站并网指示灯依次亮起的瞬间，CET中电技术与客户共同交出了一份满意的答卷。面对430政策窗口期的考验，我们凭借可靠的技术和高效的团队协作，在系统调试与并网对接的每个步骤都展现出过硬能力&a…...

编程日记 2025/8/21 9:13:16

（十）深入了解AVFoundation-采集：录制视频功能的实现

引言在前文章中，我们深入探讨了如何通过 AVCaptureSession 配置 iOS 中的捕捉输入及输出。并通过使用 AVCaptureDeviceInput 和 AVCapturePhotoOutput，我们实现了基础的照片捕获功能，并配置了 PHPreviewView 来显示实时预览。在本篇中&am…...

编程日记 2025/8/21 9:06:12

数据分析汇报七步法：用结构化思维驱动决策

在当今数据驱动的商业环境中，高效的数据汇报不仅是信息传递的工具，更是撬动决策的杠杆。基于您提供的五张核心图示，我们提炼出一套「七步汇报框架」，将复杂的数据分析转化为清晰的行动指南。这套方法论通过「现状-诊断-预见…...

编程日记 2025/8/21 9:09:11

认识Grafana及其面板（Panel）

Grafana简介 Grafana 是一款开源的数据可视化与监控平台，以其强大的数据展示能力、灵活的插件生态和广泛的兼容性，成为企业监控、IT运维、DevOps、物联网(IoT)和业务分析等领域的核心工具。数据源(Data Source) 对于Grafana而言，Promethe…...

编程日记 2025/8/21 9:13:16

FlinkCDC采集MySQL8.4报错

报错日志原因： MySQL8.4版本中弃用show MASTER STATUS语法改为：SHOW BINARY LOG STATUS 解决方案： 1、降MySQL版本 2、修改源码...

编程日记 2025/8/21 9:12:17

Webview通信系统学习指南

Webview通信系统学习指南一、定义与核心概念 1. 什么是Webview？ 定义：Webview是移动端（Android/iOS）内置的轻量级浏览器组件，用于在原生应用中嵌入网页内容。作用：实现H5页面与原生应用的深度交互&…...

编程日记 2025/8/21 9:09:14

人工智能如何革新数据可视化领域？探索未来趋势

在当今数字化时代，数据如同汹涌浪潮般不断涌现。据国际数据公司（IDC）预测，全球每年产生的数据量将从 2018 年的 33ZB 增长到 2025 年的 175ZB。面对如此海量的数据，如何有效理解和利用这些数据成为了关键问题。数据可视…...

编程日记 2025/8/20 11:41:12

探索Hello Robot开源移动操作机器人Stretch 3的新技术亮点与市场定位

Hello Robot 推出的 Stretch 3 机器人凭借其前沿技术和多功能性在众多产品中占据优势。Stretch 3 机器人采用开源设计，为开发者提供了灵活的定制空间，能够满足各种不同的需求。其配备的灵活手腕组件和 Intel Realsense D405 摄像头，显著增强了…...

编程日记 2025/8/21 9:13:17

机器人系统设置

机器人系统设置机器人系统设置与操作指南 1. 系统设置基础功能偏好设置控制柜名称修改：通过文本框输入新名称并确认主题切换：支持橙色/蓝色主题（需重启生效） 语言与日期系统语言/键盘语言设置时间格式：支持系统时…...

编程日记 2025/8/21 9:14:11

C/C++ 扩展智能提示太慢或无法解析项目

问题 C/C 扩展不解析项目，导致源码中的变量、函数都为灰色状态，无法进行跳转。有时候 log 会报如下错误： Attempting to get defaults from C compiler in "compilerPath" property: D:/Development/Tools/mingw64/bin/gcc.exe…...

编程日记 2025/8/21 9:17:06

通过Kubernetes 外部 DNS控制器来自动管理Azure DNS 和 AKS

前言： 将应用程序及其服务部署到 Kubernetes 集群后，一个问题浮现：如何使用自定义域名访问它？一个简单的解决方案是创建一条 A 记录，将域名指向服务 IP 地址。这可以手动完成，但随着服务数量的增加&#x…...

编程日记 2025/8/18 17:41:17

Elasticsearch知识汇总之ElasticSearch监控方案

八 ElasticSearch监控方案 8.1 ElasticSearch监控指标监控指标为磐基生产项指标，以下‘监控项名称’‘指标名称 ‘使用的公式‘都已详细说明，图表如下： 监控项名称指标英文名称使用的公式 elasticsearch集群健康状态 Elastic_Cluster…...

编程日记 2025/8/21 9:15:42

【能力比对】K8S数据平台VS数据平台

🔥🔥 AllData大数据产品是可定义数据中台，以数据平台为底座，以数据中台为桥梁，以机器学习平台为中层框架，以大模型应用为上游产品，提供全链路数字化解决方案。 ✨AllData数据中台官方平台&…...

编程日记 2025/8/21 9:18:43

AutoDL+SSH在vscode中远程使用GPU训练深度学习模型

注册AutoDL账号 AutoDL官网：AutoDL 注册登录之后，如果你是学生，一定要进行学生认证，可以省钱。认证之后，打开算力市场， 进行GPU选择根据自己需要的环境选择版本 ，选好之后创建并开机这里注…...

编程日记 2025/8/20 14:42:35

【C语言干货】野指针

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、什么是野指针？二、野指针的三大成因 1.指针未初始化2.指针越界访问2.指针指向已释放的内存前言提示：以下是本篇文章正文内容&…...

编程日记 2025/8/21 9:10:42

QT生成保存 Excel 文件的默认路径，导出的文件后缀自动加（1）（2）等等

//生成保存 Excel 文件的默认路径 QString MainWidget::getDefaultFilePath() const { QString basePath pathEdit->text(); if (basePath.isEmpty() || !QDir(basePath).exists()) { basePath QStandardPaths::writableLocation(QStandardPaths::DocumentsLocation); } r…...

编程日记 2025/8/21 9:13:14

React Native【详解】搭建开发环境，创建项目，启动项目

下载安装 node https://nodejs.cn/download/ 查看 npx 版本 npx -v若无 npx 则安装 npm install -g npx创建项目 npx create-expo-applatestRN_demo 为自定义的项目名称下载安装 Python 2.7 下载安装 JAVA JDK https://www.oracle.com/java/technologies/downloads/#jdk24-…...

编程日记 2025/8/20 16:52:38

AIDC智算中心建设：存储核心技术解析

目录一、智算中心存储概述 1、存储发展 2、智算存储指导政策 3、智算智能存储必要性二、智算中心存储架构及特征 1、智算存储中心架构 2、智算存储特征三、智算中心存储核心技术解析 1、长记忆存储范式为推理提质增效 2、数据编织加强全局数据高效处理 3、超节点…...

编程日记 2025/8/21 8:02:16

第11次：用户注册（完整版）

第一步：定义用户模型类 class User(AbstractUser):mobile models.CharField(max_length11, uniqueTrue, verbose_name手机号)class Meta:db_table tb_userverbose_name 用户verbose_name_plural verbose_namedef __str__(self):return self.username第二步&…...

编程日记 2025/8/21 9:04:47

论文速读《Embodied-R: 基于强化学习激活预训练模型具身空间推理能力》

项目主页：https://embodiedcity.github.io/Embodied-R/ 论文链接：https://arxiv.org/pdf/2504.12680 代码链接：https://github.com/EmbodiedCity/Embodied-R.code 0. 简介具身智能是通用人工智能的重要组成部分。我们希望预训练模型不仅能在…...

编程日记 2025/8/21 9:04:21

VMware Fusion安装win11 arm；使用Mac远程连接到Win

目录背景步骤1. 安装Fusion2. 下载Win113. 安装Win113.1 初始步骤3.2 进入安装 4. 安装Windows APP 背景最近国补太火热了，让Macbook来到6000这个价位。实在没忍住，最后入手了一台M3芯片的Macbook Air（jd6799）。既然运维出身&…...

编程日记 2025/8/21 9:10:42

【ARM】DS-试用授权离线激活

1、文档目标解决客户无法在公司网络管控下进行ARM DS 试用激活，记录解决方案。 2、问题场景客户在ARM DS激活时无法连接到ARM认证网址，客户公司网络管理无法开放全部网络权限，只能针对特定网址和网络端口可以开放或客户公司开发环境无法…...

编程日记 2025/8/18 16:19:03

泰迪杯特等奖案例学习资料：基于卷积神经网络与集成学习的网络问政平台留言文本挖掘与分析

（第八届“泰迪杯”数据挖掘挑战赛A题特等奖案例深度解析）一、案例背景与核心挑战 1.1 应用场景与行业痛点随着“互联网+政务”的推进，网络问政平台成为政府与民众沟通的重要渠道。某市问政平台日均接收留言超5000条，涉及民生、环保、交通等20余类诉求。然而，传统人工…...

编程日记 2025/8/18 20:11:09

基于 ReentrantReadWriteLock 实现高效并发控制

在多线程 Java 应用中，管理共享资源的访问是确保数据一致性和避免竞争条件的关键挑战。在某些场景中，多个线程需要频繁读取共享数据，而只有一个线程偶尔需要更新数据。例如，在一个网页投票系统中，大量用户可能同时查看投票结果（读操作），而投票更新（写操作）则相对较少…...

编程日记 2025/8/21 9:08:08

代理式AI（Agentic AI）：2025年企业AI转型的催化剂

李升伟摘译步入2025：代理式AI开启企业智能化转型新纪元随着2025年临近，企业已不再纠结"是否采用人工智能"，而是迫切追问"如何加速AI进化"。传统AI系统在敏捷性、扩展性和自主性上的局限日益显现，新一代技…...

编程日记 2025/8/18 20:11:05

MySQL中MVCC指什么？

简要回答： MVCC（multi version concurrency control）即多版本并发控制，为了确保多线程下数据的安全，可以通过undo log和ReadView来实现不同的事务隔离级别。对于已提交读和可重复读隔离级别的事务来说，M…...

编程日记 2025/8/21 9:10:43

购物数据分析

这是一个关于电商双11美妆数据分析的项目页面，包含版本记录、运行代码提示、评论等功能模块的相关描述。，会涉及数据处理、可视化、统计分析等代码逻辑，用于处理美妆电商双11相关数据，如销售数据统计、消费者行为分析等。数据源…...

编程日记 2025/8/21 9:03:10

基于GA遗传优化的不同规模城市TSP问题求解算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述旅行商问题（Traveling Salesman Problem，TSP）是一个经典的组合优化问题，旨在找到一个旅行商在访问多个城市后回到起…...

编程日记 2025/8/21 9:13:14

Nginx 安全防护与 HTTPS 部署

目录一. 核心安全配置 1. 隐藏版本号 2. 限制危险请求方法 3. 请求限制（CC 攻击防御） 4. 防盗链二. 高级防护 1. 动态黑名单 2. nginx https 配置 2.1 https 概念 2.1.1 https 为什么不安全 2.1.2 安全通信的四大原则 2.1.3 HTTPS 通信原理…...

编程日记 2025/8/20 18:45:19

隐私计算框架FATE二次开发心得整理（工业场景实践）

文章目录版本介绍隐私计算介绍前言FATE架构总体架构FateBoard架构前端架构后端架构 FateClient架构创建DAG方式DAG生成任务管理python SDK方式 FateFlow架构Eggroll架构FATE算法架构Cpn层FATE ML层组件新增流程新增组件流程新增算法流程版本介绍 WeBank的FATE开源版本 2.2.…...

编程日记 2025/8/21 9:14:13

MySQL性能调优探秘：我的实战笔记 (上篇：从EXPLAIN到SQL重写)

哈喽，各位技术伙伴们！👋 最近我一头扎进了 MySQL 性能调优的奇妙世界，感觉就像打开了新世界的大门！从一脸懵懂到现在能看懂 EXPLAIN 的“天书”，还能对 SQL “指点江山”，这个过程充满了“啊哈&…...

编程日记 2025/8/21 9:07:13

第15章 Python数据类型详解之分解理解：基础数据类型常见易错点和性能优化篇

文章目录 @[toc]第15章 Python数据类型详解之分解理解：基础数据类型常见易错点和性能优化一、常见易错点剖析1. 整数（`int`）2. 浮点数（`float`）3. 布尔（`bool`）4. 字符串（`str`）5. 字节（`bytes`）与字节数组（`bytearray`）二、性能优化策略1. 整数运算优化2. 浮点数…...

编程日记 2025/8/21 9:14:12

20250506联想Lenovo笔记本电脑的USB鼠标失效之后在WIN10下的关机的方法【触摸板被禁用】

20250506联想Lenovo笔记本电脑的USB鼠标失效之后在WIN10下的关机的方法【触摸板被禁用】 2025/5/6 20:35 缘起：在调试的时候，USB鼠标突然失效了。由于USB转TTL电平的串口CH340经常插拔【可能接口接触不良了，插拔测试一下是不是串口坏掉了】。…...

编程日记 2025/8/21 9:15:43

【Hive入门】Hive安全管理与权限控制：审计日志全解析，构建完善的操作追踪体系

目录引言 1 Hive审计日志概述 1.1 审计日志的核心价值 1.2 Hive审计日志类型 2 HiveServer2操作日志配置 2.1 基础配置方案 2.2 日志格式解析 2.3 日志轮转配置 3 Metastore审计配置 3.1 Metastore审计启用 3.2 审计事件类型 4 高级审计方案 4.1 与Apache Ranger…...

编程日记 2025/8/21 9:18:43

某团小程序mtgsig,_token 生成逻辑分析

前言本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！ 太久不更新重新找回号 …...

编程日记 2025/8/21 9:17:07

C#问题加载格式不正确解决方法

出现上面问题解决办法：C#问题改成x86 不要选择anycpu...

编程日记 2025/8/21 9:03:09

K-means

K均值算法（K-means）聚类【关键词】K个种子，均值一、K-means算法原理聚类的概念：一种无监督的学习，事先不知道类别，自动将相似的对象归到同一个簇中。 K-Means算法是一种聚类分析（cluster…...

编程日记 2025/8/21 9:04:46

凌晨三点的数据库崩溃现场

我是小明，一个在创业公司打杂的全栈开发者。上周四凌晨三点，老板突然在群里甩来一句："明天早会需要用户行为分析报表，重点看 Q1 新注册用户的付费转化率。"我揉着眼睛打开电脑，对着三个屏幕发愣 —— 左边是…...

编程日记 2025/8/20 21:58:07

【大模型面试】大模型（LLMs）高频面题全面整理（★2025年5月最新版★）

【大模型面试】大模型（LLMs）高频面题全面整理（★2025年5月最新版★） 🌟 嗨，你好，我是青松 ！ 🌈 自小刺头深草里，而今渐觉出蓬蒿。本笔记适合大模型初学者和…...

编程日记 2025/8/21 9:08:09

C++入门基础(上)

一. C发展历史 C的起源可以追溯到1979年，当时Bjarne Stroustrup(本贾尼斯特劳斯特卢普，这个翻译的名字不同的地方可能有差异)在贝尔实验室从事计算机科学和软件工程的研究工作。面对项目中复杂的软件开发任务，特别是模拟和操作系统的开发工作…...

编程日记 2025/8/21 9:15:44

Nacos源码—4.Nacos集群高可用分析四

大纲 6.CAP原则与Raft协议 7.Nacos实现的Raft协议是如何写入数据的 8.Nacos实现的Raft协议是如何选举Leader节点的 9.Nacos实现的Raft协议是如何同步数据的 10.Nacos如何实现Raft协议的简版总结 8.Nacos实现的Raft协议是如何选举Leader节点的 (1)初始化RaftCore实例时会开…...

编程日记 2025/8/21 9:12:18

互联网大厂Java求职面试：AI与云原生下的系统设计挑战-3

互联网大厂Java求职面试：AI与云原生下的系统设计挑战-3 第一轮提问：从电商场景切入，聚焦分布式事务与库存一致性面试官（严肃）：郑薪苦，你最近在做电商系统的促销活动，如何处理分布…...

编程日记 2025/8/21 9:15:44

【KWDB创作者计划】_通过一篇文章了解什么是 KWDB（KaiwuDB）

文章目录 📋 前言🎯 关于 KaiwuDB 组成🎯 KaiwuDB 核心架构和功能图🧩 KaiwuDB 2.0 版本核心特性🧩 KaiwuDB Lite 版本介绍 🎯 KaiwuDB 产品优势🎯 KaiwuDB 应用场景🧩 典型应用场景…...

编程日记 2025/8/21 9:04:21

双系统电脑中如何把ubuntu装进外接移动固态硬盘

电脑：win11 ubuntu22.04 实体机虚拟机：VMware17 镜像文件：ubuntu-22.04.4-desktop-amd64.iso 或者 ubuntu20.4的镜像外接固态硬盘1个一、首先win11中安装vmware17 具体安装方法，网上很多教程二、磁盘分区 1.在笔…...

编程日记 2025/8/18 20:10:26

Flink + Kafka 构建实时指标体系的实战方法论

本文聚焦于如何利用 Flink 与 Kafka 构建一套灵活、可扩展的实时指标体系，特别适用于用户行为分析、营销漏斗转化、业务实时看板等场景。一、为什么要构建实时指标体系？在数字化运营趋势下，分钟级指标反馈能力变得尤为重要： ✅ 营销投放实时监控 CTR / CVR ✅ 业务增长实…...

编程日记 2025/8/20 5:38:54

RLOO：将多次其他回答的平均reward作为baseline

RLOO：将多次其他回答的平均reward作为baseline TL; DR：基于 REINFROCE 算法，对于同一 prompt 在线采样 k k k 次，取除自己外的其他 k − 1 k-1 k−1 条回答的平均 reward 作为 baseline。从 PPO 到 REINFORCE 众所周知&…...

编程日记 2025/8/18 20:10:22