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

Vue 组件 - Slot 内容分发

news 来源：原创 2025/6/28 1:19:18

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件 - Slot 内容分发

Slot内容分发

旧版slot

单插槽

使用插槽

具名插槽

插槽实现导航

使用插槽优点

新版slot

插槽版抽屉

总结

Slot内容分发

混合父组件的内容和子组件自己模板 -- 内容分发

父组件模板的内容在父组件作用域内编译，子组件模板内容在子组件作用域内编译。

旧版slot

如果直接在组件内部放入自定义内容是无法显示的；

slot插槽技术，可以在组件内部自定义显示内容。

单插槽

首先创建一个组件，在组件中设置好插槽位置，注意slot是固定的。

示例如下：

<script>Vue.component("child", {template:`<div>child<slot></slot></div>`})let vm = new Vue({el:"#box"})
</script>

使用插槽

写一行会在插槽中显示一行，多行的话，也会出现多行；

示例如下：

<div id="box"><!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态--><child><div>面朝大海</div><div>春暖花开</div></child>
</div>

效果如下：

这叫做单个插槽写法。

具名插槽

如果要使用多个自定义内容的，可以使用具名插槽。

修改原有组件内容，改为具名插槽格式。

示例如下：

Vue.component("child", {template:`<div>child<slot name="a"></slot><slot name="b"></slot><slot name="c"></slot><slot></slot></div>`
})

组件使用slot，进行对号入座。

示例如下：

<div id="box"><!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态--><child><div slot="a">面朝大海</div><div slot="b">春暖花开</div><div slot="c">从明天起做一个快乐的人</div><div>劈柴喂马 关心粮食和蔬菜</div></child>
</div>

效果如下：

插槽实现导航

利用slot可以实现导航栏和导航图标的灵活显示。

使用slot插槽后不再受到内置组件限制。

示例如下：

<div id="box"><!--当前组件或者节点 在哪个模板中，就能访问哪个模板状态--><navbar><button slot="left"> < 返回</button><i class="icon" slot="right">字体图标</i></navbar>
</div>
<script>Vue.component("navbar", {template:`<div><slot name="left"></solt><span>navbar</span><slot name="right"></solt></div>`})let vm = new Vue({el:"#box"})
</script>

使用插槽优点

通过插槽自定义导航栏两侧的内容。

扩展组件能力，提高组件复用性。

新版slot

新版slot是2.6版本的vue。并不是3后的版本。

以前的slot不知道算属性还是指令。

现在明确为指令写法，#号为简写方式，上面是指令写法。

定义组件和插槽不需修改。

示例如下：

<child><template v-slot:a><div>面朝大海</div></template><template v-slot:b><div>春暖花开</div></template>
</child>

Or

<navbar><template #left><button> < 返回 </button></template><template #right><i class="icon">字体图标</i></template>
</navbar>

官网示例

插槽版抽屉

对原有的抽屉（子传父示例）改为插槽版。

即原来的导航列表的打开和关闭功能。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script src="../lib/vue.js"></script>
<div id="box"><navbar><button @click="isShow=!isShow">点击</button></navbar><sidebar v-show="isShow"></sidebar>
</div>
<script>// 定义一个全局组件Vue.component("navbar", {template: `<div style="background-color: red">nabbar- <slot></slot></div>`,})Vue.component("sidebar", {template:`<div style="background-color: yellow"><ul><li>第一行</li><li>第二行</li><li>第三行</li>
</ul>
</div>`})let vm = new Vue({el:"#box",data:{isShow: true}})
</script>
</body>
</html>

去掉Vue原有监听和触发事件，只通过isShow取反后的值判断来显示。

总结

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件 - Slot 内容分发

Vue 组件 - Slot 内容分发

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue组件 - Slot 内容分发目录 Slot内容分发旧版slot 单插槽使用插槽具名插槽插槽实现导航使用插槽优点新版slot Or 插槽版抽屉总结 Slot内容分发混合父组件的内容和子组件自己模板 -- 内容分发父组件模…...

编程日记 2025/6/28 1:19:18

Mysql之事务（下）

🏝️专栏：Mysql_猫咪-9527的博客-CSDN博客 🌅主页：猫咪-9527-CSDN博客 “欲穷千里目，更上一层楼。会当凌绝顶，一览众山小。” 目录 5. 事务的隔离级别与并发控制 5.1事务的隔离级别 5.2查看与设置事务的…...

编程日记 2025/6/28 7:15:47

LabVIEW液压控制系统开发要点

液压控制系统开发需兼顾高实时性、强抗干扰性和安全性，尤其在重工业场景中，毫秒级响应延迟或数据异常都可能导致设备损坏。本文以某钢厂液压升降平台项目为例，从硬件选型、控制算法、安全机制三方面，详解LabVIEW开发中的关键问题与…...

编程日记 2025/6/28 7:03:07

文章目录生成过程MyBatisGenerator.generate()代码入口 pid0,id0context.generateFiles()代码 pid0,id1introspectedTable.getGeneratedJavaFiles() java部分生成 pid1,id11introspectedTable.getGeneratedXmlFiles() xml部分生成 pid1,id12这里是一波三连调用XMLMapperGenera…...

编程日记 2025/6/28 4:43:53

Mysql-数据库、安装、登录

一. 数据库 1. 数据库：DataBase（DB），是存储和管理数据的仓库。 2. 数据库管理系统：DataBase Management System（DBMS）,操纵管理数据库的大型软件 3. SQL：Structured Query Language&…...

编程日记 2025/6/28 3:41:51

HTTP 请求方法

HTTP 请求方法引言 HTTP（超文本传输协议）是互联网上应用最为广泛的网络协议之一。它定义了客户端与服务器之间通信的规则。HTTP请求方法，也称为HTTP动词，是客户端向服务器发送请求时使用的操作类型。本文将详细介绍HTTP请求方法的概念、分类、常用方法及其在实际应用中的…...

编程日记 2025/6/28 5:58:38

群体智能优化算法-算术优化算法（Arithmetic Optimization Algorithm, AOA，含Matlab源代码）

摘要算术优化算法（Arithmetic Optimization Algorithm, AOA）是一种新颖的群体智能优化算法，灵感来源于加、减、乘、除四种基本算术运算。在优化过程中，AOA 通过乘除操作实现全局探索，通过加减操作强化局部开发&#…...

编程日记 2025/6/28 1:19:38

4.1-python操作wrod/pdf 文件

1.读取word文件首先安装软件包 pip3 install python-docx from docx import Documentimport os path os.path.join(os.getcwd(),你的文档名字.docx)# 加载文档 doc Document(path)# 遍历数据 for p in doc.paragraphs:print(p.text)# 遍历文档中所有表格 for t in doc.t…...

编程日记 2025/6/28 6:01:51

C# 窗体应用(.FET Framework) 线程操作方法

一、Thread线程使用方法初始化方法 Thread th1; th1 new Thread(方法名); th1.IsBackground true; th1.Start();传参 ///定义一个object接受参数的方法 private void Test(object n){string str1 n as string; MessageBox.Show(str1); }// 调用方法 Thread th2 string s…...

编程日记 2025/6/28 4:14:34

vscode/cursor编辑器中vue3文件里面的css不能注释解决办法

升级了cursor后发现css或者html里面的代码不能单行注释了，真的很烦人，找了很多解决办法，还是定位到插件上，有一个vue的插件，把它禁用掉就可以注释了，然后再把这个插件启用，就可以使用了&#xf…...

编程日记 2025/6/28 3:48:38

Jenkins详细安装配置部署

Jenkins是一款流行的开源持续集成/持续交付(CI/CD)工具，可以实现自动化构建、测试和部署软件。下面是Jenkins的详细安装、配置和部署过程。安装Jenkins 1. 安装Java Jenkins运行需要Java环境，因此需要先安装Java。具体安装方式根据不同的操作系统有所…...

编程日记 2025/6/28 5:23:15

《Linux运维总结：基于银河麒麟V10+ARM64架构CPU源码编译部署单实例redis7.2.6》

总结：整理不易，如果对你有帮助，可否点赞关注一下？ 更多详细内容请参考：《Linux运维篇：Linux系统运维指南》一、环境信息环境信息如下： 主机IP 操作系统 Redis版本 CPU架构 192.168.1.111 K…...

编程日记 2025/6/28 3:34:35

音视频开发---常用工具

一、VLC播放器 1. 简介 VLC多媒体播放器（最初命名为VideoLAN客户端）是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘、VCD影音光盘和各类流式协议。它也能作为unicast或multicast的流式服务器在IPv4或IPv6的高速连接下使用。它融…...

编程日记 2025/6/28 4:08:58

Java 大视界 -- 基于 Java 的大数据分布式计算在基因测序数据分析中的性能优化（161）

💖亲爱的朋友们，热烈欢迎来到青云交的博客！能与诸位在此相逢，我倍感荣幸。在这飞速更迭的时代，我们都渴望一方心灵净土，而我的博客正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识，也…...

编程日记 2025/6/28 5:39:14

关于跨域与.NET的处理方案

在 Web 开发里，浏览器的同源策略是一项关键的安全机制。同源指的是两个 URL 的协议、域名和端口都相同。当浏览器从一个源（域名、协议、端口）的网页去请求另一个源的资源时，就会产生跨域问题。例如，从 http://www.exam…...

编程日记 2025/6/28 6:54:05

中级：Maven面试题精讲

一、引言在Java开发中，Maven作为一款强大的项目管理和构建工具，被广泛应用于项目构建、依赖管理和插件机制等方面。面试官通过相关问题考察候选人对Maven核心功能的理解和实际应用能力，以及在复杂项目场景下合理配置和优化Maven的能力。本文…...

编程日记 2025/6/28 2:21:04

MySQL与Redis数据一致性保障方案详解

前言在现代分布式系统中，MySQL和Redis的结合使用非常普遍。MySQL作为关系型数据库负责持久化存储，而Redis则作为高性能缓存层提升系统的响应速度。然而，在这种架构下，如何保证MySQL与Redis之间的数据一致性是一个重要的挑战。本…...

编程日记 2025/6/28 19:55:23

外观模式详解

以下是一个结合外观模式解决实际开发问题的Java实现案例，涵盖复杂系统整合、接口简化、版本兼容等场景需求，附带逐行中文注释： 场景描述开发一个智能家居控制系统，需整合多个子系统： 灯光系统：多房间灯光…...

编程日记 2025/6/28 4:23:31

JavaScript单例模式

单例模式保证一个类仅有一个实例，并提供一个访问它的全局访问点。用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象，示例代码如下： 单例模式的核心思想是让指定的类只存在唯一一个实例&…...

编程日记 2025/6/28 5:57:47

Kong网关研究

目录概述部署kong docker服务 kong初始化与启动验证部署konga 网关功能 JWT认证若依的鉴权认证 kong的JWT支持限流黑名单概述 Kong网关基于OpenResty，而OpenResty基于Nginx，Nginx本身是性能强大的方向代理与web容器，Ope…...

编程日记 2025/6/28 4:36:11

LangChain 结构化输出：用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”

目录一、Pydantic 二、PydanticOutputParser 1、为什么需要 PydanticOutputParser？ 2、Pydantic和PydanticOutputParser核心区别 3、Pydantic的不足 （1）无法直接解析非结构化文本 （2）缺乏对 LLM 输出的适配性 …...

编程日记 2025/6/28 5:51:56

source（WEB）

##解题思路首先打开kali，使用dirsearch扫描下网站目录，发现网站有.git源码泄露 dirsearch -u URL 接着使用wget将源码下载到本地（尝试过使用githack，但是得到的信息是flag不在这） wget -r URL/.git/ 接着cd到wget的…...

编程日记 2025/6/28 3:36:07

【蓝桥杯】单片机设计与开发，温度传感器DS18B20

一、温度传感器概述结构图二、通信过程三、onewire单总线协议概述四、单总线的工作原理黑粗线是单片机发送的，浅的是s18b20回应的五、温度传感器的应用六、onewire 七、课后习题...

编程日记 2025/6/28 5:36:22

trae.ai 编辑器：前端开发者的智能效率革命

一、为什么我们需要更智能的编辑器？ 作为从业5年的前端开发者，我使用过从Sublime到VSCode的各种编辑器。但随着现代前端技术的复杂度爆炸式增长（想想一个React组件可能涉及JSX、CSS-in-JS、TypeScript和GraphQL），传统…...

编程日记 2025/6/28 5:48:45

【FPGA实战】基于DE2-115实现数字秒表

【FPGA实战】基于DE2-115实现数字秒表一、项目概述二、层次化设计架构三、核心模块实现原理1. 时钟分频模块(clock_divider.v)2. 按键处理模块2.1 消抖(debounce .v)2.2 边沿检测(edge_detector .v) 3. 时间计数模块(time_counter .v)4. 显示驱动模块(seven_seg_display.v)5.顶…...

编程日记 2025/6/28 5:59:29

动态规划入门：从记忆化搜索到递推

本篇笔记基于b站灵茶山艾府。 198. 打家劫舍你是一个专业的小偷，计划偷窃沿街的房屋。每间房内都藏有一定的现金，影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统，如果两间相邻的房屋在同一晚上被小偷闯入，系统…...

编程日记 2025/6/28 3:09:41

Linux 入门：基础开发工具（上）vim,gcc/g++,make/makefile

目录一.软件包管理器一）.软件包二）.安装软件三）.删除软件二.编辑器vim 一）.vim的基本介绍 1.正常/普通/命令模式(Normal mode) 2.插入模式(Insert mode) 3.底行模式(last line mode) 二）.vim的基本操作 …...

编程日记 2025/6/28 6:19:28

golang 的channel

理解 Go 语言的 Channel Channel 是 Go 语言中用于 goroutine 之间通信和同步的重要机制。通过 channel，goroutine 可以安全地交换数据，避免了共享内存带来的竞态条件和内存一致性问题。 1. Channel 的基本概念 Channel 是一个先进先出（FI…...

编程日记 2025/6/28 17:56:11

HarmonyOS Next～鸿蒙元服务开发指南：核心功能与实践

HarmonyOS Next～鸿蒙元服务开发指南：核心功能与实践一、元服务核心概念原子化服务定义元服务（原子服务）是鸿蒙系统的核心架构单元，具备独立业务能力的轻量化服务模块，支持免安装、跨设备调用和智能分发…...

编程日记 2025/6/28 4:10:36

stm32面试

数据结构相关问题 stm32面试数据结构相关问题目录基础数据结构树与图排序与查找算法 Linux相关问题Linux系统基础Linux命令与脚本Linux网络与服务操作系统相关问题操作系统基础概念操作系统调度算法操作系统同步与通信 STM32相关问题STM32硬件基础STM32编程与开发STM32应用与…...

编程日记 2025/6/28 2:27:31

构建大语言模型应用：句子转换器（Sentence Transformers）（第三部分）

本系列文章目录简介数据准备句子转换器（本文）向量数据库搜索与检索大语言模型开源检索增强生成评估大语言模型服务高级检索增强生成 RAG 在之前的博客中，我们学习了为RAG（检索增强生成，Retrieval Augmented Generati…...

编程日记 2025/6/28 19:52:36

新能源汽车空调系统（R134A）性能评估（一）

国内外主流空调系统厂家：贝尔、德尔福、空调国际、法雷奥、电装、松芝、杰信、新电、豫新等泛亚汽车的空调电子部是比较优秀的整车空调研发团队。空调系统综合试验台架是一套由试验室、风量测定装置、空气调和器、空气温度测定装置、湿度测定装置、加热器试验辅助…...

编程日记 2025/6/28 6:39:21

STRUCTBERT：将语言结构融入预训练以提升深度语言理解

【摘要】最近，预训练语言模型BERT（及其经过稳健优化的版本RoBERTa）在自然语言理解（NLU）领域引起了广泛关注，并在情感分类、自然语言推理、语义文本相似度和问答等各种NLU任务中达到了最先进的准确率。受到E…...

编程日记 2025/6/27 17:50:47

MCP协议的Streamable HTTP：革新数据传输的未来

引言在数字化时代，数据传输的效率和稳定性是推动技术进步的关键。MCP（Model Context Protocol）作为AI生态系统中的重要一环，通过引入Streamable HTTP传输机制，为数据交互带来了革命性的变化。本文将深入解读MCP协议的…...

编程日记 2025/6/28 2:00:44

基于 RK3588 的 YOLO 多线程推理多级硬件加速引擎框架设计（代码框架和实现细节）

一、前言接续上一篇文章，这个部分主要分析代码框架的实现细节和设计理念。基于RK3588的YOLO多线程推理多级硬件加速引擎框架设计（项目总览和加速效果）-CSDN博客https://blog.csdn.net/plmm__/article/details/146542002?spm1001.2014.300…...

编程日记 2025/6/28 5:43:16

stm32 can 遥控帧的问题

STM32单片机使用CAN协议进行通信引用这个博客的一段话 CAN的遥控帧（Remote Frame）的主要作用是请求其他节点发送具有特定ID的数据帧。具体来说，当一个节点需要从另一个节点获取数据时，它可以发送一个遥控帧，而不是…...

编程日记 2025/6/28 1:19:30

机器人基础知识-1

1.六轴机器人中的六轴是什么？ 第一轴（J1）：底座旋转控制机器人整体绕垂直轴旋转（左右摆动），决定工作范围的水平方向。第二轴（J2）：下臂前后摆动驱动机器人的…...

编程日记 2025/6/28 4:01:40

JAVA- 锁机制介绍进程锁

进程锁基于文件的锁基于Socket的锁数据库锁分布式锁基于Redis的分布式锁基于ZooKeeper的分布式锁实际工作中都是集群部署，通过负载均衡多台服务器工作，所以存在多个进程并发执行情况，而在每台服务器中又存在多个线程并发的情况，…...

编程日记 2025/6/28 4:53:25

如何在WordPress中强制用户使用强密码？

在如今网络安全备受关注的环境下，弱密码问题不容忽视。很多用户习惯在多个网站使用相同且简单的密码，这样一来，若不强制他们在 WordPress 网站上使用强密码，网站的安全性就会受到威胁。尤其对于在线商店、会员网站、多作者博客等站…...

编程日记 2025/6/28 2:56:34

鸿蒙NEXT开发Base64工具类（ArkTs）

import util from ohos.util;/*** Base64 工具类* author: 鸿蒙布道师* since: 2025/03/31*/ export class Base64Util {/*** 创建 Base64Helper 实例* returns Base64Helper 实例*/private static createBase64Helper(): util.Base64Helper {return new util.Base64Helper();}…...

编程日记 2025/6/28 5:04:28

基于HUTOOL实现RSA工具类

一、前言：用 Hutool 简化 RSA 加密开发，提升代码安全与效率在当今数据安全至关重要的时代，RSA 非对称加密作为保护敏感信息的核心技术，广泛应用于通信加密、数字签名、密钥交换等场景。然而，手动实现 RSA 算法涉及复…...

编程日记 2025/6/28 2:02:04

flink 分组窗口聚合与窗口表值函数聚合的区别

警告：分组窗口聚合已经过时。推荐使用更加强大和有效的窗口表值函数聚合。参考官方文档在 Apache Flink 中，分组窗口聚合（Group Window Aggregation） 和窗口表值函数聚合（Windowing TVF Aggregation）…...

编程日记 2025/6/28 3:52:28

prompt_status:5: command not found: wc解决办法

问题出现背景想配置uniapp的命令行，在.zprofile配置路径的时候PATH 前面少打了一个$，执行了 source，导致各种命令都失效。解决办法用fider 打开用户文件夹，Command Shift .显示隐藏文件，用文本编辑器修改一下&…...

编程日记 2025/6/28 1:19:33

《STL 六大组件之容器篇：简单了解 list》

目录一、list 简介二、list 的常用接口1. 构造函数（constructor ）2. 迭代器（iterator）3. 容量、修改和访问（capacity 、modify and access） 一、list 简介简单来说，list 就是数据结构初阶中学…...

编程日记 2025/6/28 1:19:35

向量数据库学习笔记（2） —— pgvector 用法与最佳实践

关于向量的基础概念，可以参考：向量数据库学习笔记（1） —— 基础概念-CSDN博客一、 pgvector简介 pgvector 是一款开源的、基于pg的、向量相似性搜索插件，将您的向量数据与其他数据统一存储在pg中。支持功能包括&…...

编程日记 2025/6/28 3:25:29

TCP的连接建立

面向连接定义：在发送数据之前，需要建立一条点到点的连接 （参数协商的过程。因为tcp要保证可靠，所以tcp通信是发生在双方之间、两端之间的，两端在正式发送数据之前需要约定一些初始参数，这个过程就是面向连…...

编程日记 2025/6/28 1:19:32

如何让AI帮你做用户运营:用户消费偏好分层和洞察

随着deepseek的爆火，我一直在想能不能用AI来帮我做用户运营，目前deepseek只能提供框架层面的运营建议，还无法实现将订单数据给到它，能够自动化分析并将用户分层，并给出可视化的运营洞察报表。但是，我要告诉…...

编程日记 2025/6/28 4:53:16

二分答案-P8647 [蓝桥杯 2017 省 AB] 分巧克力

题解：P8647 [蓝桥杯 2017 省 AB] 分巧克力题目传送门题目链接一、题目描述小明有N块不同尺寸的巧克力，需要切出K块相同大小的正方形巧克力分给小朋友们。要求找到能满足条件的最大的正方形边长。二、题目分析我们需要从N块巧克力中切出K个相…...

编程日记 2025/6/28 5:28:37

搜广推校招面经六十一

美团推荐算法一、ANN算法了解么？说几种你了解的ANN算法 ANN 近似最近邻搜索（Approximate Nearest Neighbor Search）算法 1.1. KD-Tree（K-Dimensional Tree，K 维树） 类型: 空间划分数据结构适用场景: 低…...

编程日记 2025/6/28 5:19:33

某地老旧房屋自动化监测项目

1. 项目简介自从上个世纪90年代以来，我国经济发展迅猛，在此期间大量建筑平地而起，并且多为砖混结构的住房，使用寿命通常约为30-50年，钢筋混凝土结构，钢结构等高层建筑，这些建筑在一般情况下的…...

编程日记 2025/6/28 5:41:53

Slot内容分发

旧版slot

单插槽

使用插槽

具名插槽

插槽实现导航

使用插槽优点

新版slot

Or

插槽版抽屉

总结

相关文章：