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

VUE组件插槽使用示例，弹窗样式

news 来源：原创 2025/6/16 3:56:02

在Vue.js中，插槽（slots）是一种非常强大的功能，它允许你在父组件中向子组件传递内容。插槽主要有三种类型：默认插槽、具名插槽和作用域插槽。下面是一些示例来展示如何使用这些插槽。

默认插槽

默认插槽是最简单的插槽类型，它不需要命名。

子组件（ChildComponent.vue）

<template><div class="child-component"><slot></slot> <!-- 默认插槽 --></div>
</template><script>
export default {name: 'ChildComponent'
}
</script><style scoped>
.child-component {border: 1px solid #ccc;padding: 10px;
}
</style>

父组件（ParentComponent.vue）

<template><div class="parent-component"><ChildComponent><p>这是传递给子组件的默认插槽内容。</p></ChildComponent></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent}
}
</script><style scoped>
.parent-component {margin-top: 20px;
}
</style>

具名插槽

具名插槽允许你在子组件中定义多个插槽，并通过名称来区分它们。

子组件（ChildComponent.vue）

<template><div class="child-component"><slot name="header"></slot> <!-- 具名插槽 --><p>这是子组件的默认内容。</p><slot name="footer"></slot> <!-- 具名插槽 --></div>
</template><script>
export default {name: 'ChildComponent'
}
</script><style scoped>
.child-component {border: 1px solid #ccc;padding: 10px;
}
</style>

父组件（ParentComponent.vue）

<template><div class="parent-component"><ChildComponent><template v-slot:header><h1>这是头部内容</h1></template><template v-slot:footer><p>这是底部内容</p></template></ChildComponent></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent}
}
</script><style scoped>
.parent-component {margin-top: 20px;
}
</style>

作用域插槽

作用域插槽允许子组件向父组件传递数据，父组件可以使用这些数据来渲染内容。

子组件（ChildComponent.vue）

<template><div class="child-component"><slot :user="user"></slot> <!-- 作用域插槽 --></div>
</template><script>
export default {name: 'ChildComponent',data() {return {user: {name: '张三',age: 30}}}
}
</script><style scoped>
.child-component {border: 1px solid #ccc;padding: 10px;
}
</style>

父组件（ParentComponent.vue）

<template><div class="parent-component"><ChildComponent v-slot:default="slotProps"><p>姓名: {{ slotProps.user.name }}</p><p>年龄: {{ slotProps.user.age }}</p></ChildComponent></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent}
}
</script><style scoped>
.parent-component {margin-top: 20px;
}
</style>

这些示例展示了如何在Vue.js中使用不同类型的插槽来增强组件的灵活性和可重用性。

VUE组件插槽使用示例，弹窗样式

在Vue.js中，插槽（slots）是一种非常强大的功能，它允许你在父组件中向子组件传递内容。插槽主要有三种类型：默认插槽、具名插槽和作用域插槽。下面是一些示例来展示如何使用这些插槽。默认插槽默认插槽是最简单的插槽…...

编程日记 2025/5/31 16:21:15

ARM嵌入式学习--第八天（PWM）

PWM -PWM介绍 PWM（pulse Width Modulation）简称脉宽调制，是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术，广泛应用在测量，通信，工控等方面 PWM的频率是指在1秒钟内，信号从…...

编程日记 2025/6/4 8:19:36

新能源汽车大屏可视化第三次数据存储

任务： 将数据存放到temp.csv 链接： 1.排行页面 https://www.dongchedi.com/sales 2.参数页面 https://www.dongchedi.com/auto/params-carIds-x-9824 完善打印： 1. [{‘series_id’: 5952, ‘series_name’: ‘海鸥’, ‘image’: ‘https://…...

编程日记 2025/6/3 7:27:20

1. 备份源镜像 sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2. 下载国内镜像阿里云如果没有wget可以用curl 代替 sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo 清华大学 sudo wget -…...

编程日记 2025/6/1 1:31:18

SAP:如何修改已释放的请求

SAP:如何修改已释放的请求 QQ出了一个新功能，把10年前的旧日志推给自己。这个10年前的日志，是用户反映在SE10中把请求释放后发现漏了内容，想修改已释放的请求。经调查写了一个小程序，实现用户的需求。 *&-------------------…...

编程日记 2025/6/2 10:08:01

js的?. 和??和||有什么区别

let a 0; let b null; let c Hello;console.log(a ?? default); // 0 console.log(b ?? default); // "default" console.log(c ?? default); // "Hello"console.log(a || default); // "default" (因为 0 是假值) console.log(b |…...

编程日记 2025/6/2 3:29:49

clickhouse 分布式表创建、增加、更新、删除、查询

创建分布式表 --先创建本地表设置自动过期时间3天 CREATE TABLE IF NOT EXISTS ck_database.ck_databaseon cluster default(cluster name) (table_id String COMMENT id,item_id String COMMENT 业务id,desc Int64 COMMENT 描述,time DateTime DEFAULT now() COMMENT 数据…...

编程日记 2025/6/2 11:01:45

推送本地仓库到远程git仓库

目录推送本地仓库到远程git仓库1.1修改本地仓库用户名1.2 push 命令1.3远程分支查看推送本地仓库到远程git仓库删除之前的仓库中的所有内容，从新建库，同时创建一个 A.txt 文件清空原有的远程仓库内容，重新创建一个新的仓库，…...

编程日记 2025/6/2 11:01:43

LSTM长短期记忆网络

LSTM（长短期记忆网络）数学原理 LSTM（Long Short-Term Memory）是一种特殊的递归神经网络（RNN），解决了标准RNN中存在的梯度消失（Vanishing Gradient） 和**梯度爆炸&#x…...

编程日记 2025/6/3 16:07:06

ABAP SQL 取日期+时间最新的一条数据

我们在系统对接的时候，外部系统可能会推送多个数据给到我们。我们 SAP 系统的表数据中日期和时间是作为主键的，那么如果通过 ABAP SQL 取到最新日期的最新时间呢。解决方案： 方式 1：SELECT MAX 可以通过两个 SELECT MAX 来取…...

编程日记 2025/6/3 14:43:43

SAST静态应用安全测试常见的编码规则

行业优先级难易度标准标准名称数量　军工12易GJB 5369:2005GJB_5369（国家军用标准航天型号软件C语言可靠性编程规范）138军工行业最早的C语言编码标准，强制性4易GJB 8114:2013GJB_8114（国家军用标准C/C语言可靠性编程规范&#xff…...

编程日记 2025/6/4 4:35:00

AI相关专业名词汇总解释

1.SFT Supervised fine-tuning，“有监督微调”意味着使用有标签的数据来调整一个已预训练好的语言模型（LLM），使其更适应某一特定任务。通常LLM的预训练是无监督的，但微调过程往往是有监督的。详解：https:/…...

编程日记 2025/6/2 10:17:26

【C语言】指针数组和数组指针

前言指针数组和数组指针是C语言中经常混淆的两个概念，虽然他们的名字相似，但其含义却完全不同。指针数组指针数组本质是一个数组，特点是数组中的元素均为指针，其定义形式为： 数据类型 *指针名[长度] 例如 int *…...

编程日记 2025/6/3 18:36:35

联邦学习中：公共物品属性的一般定义

在经济学和相关领域中，公共物品属性具有特定的含义，在论文中与联邦学习数据交易等情境相关联时，其意义如下：公共物品属性的一般定义非排他性公共物品一旦被提供，很难或不可能排除其他人使用。例如，路灯照亮了街道，一个人使用路灯照明并不会阻止其他人同时使用，无法…...

编程日记 2025/6/2 11:01:34

前端的Python应用指南（一）：快速构建 Web 服务器 - Flask vs Node.js 对比

随着前端开发技术的不断发展，前端开发者的技术栈也在不断扩展。如今，前端开发者不仅要掌握 HTML、CSS、JavaScript，还要掌握后端技术，成为全栈开发者。而在后端技术的选择上，Python 和 Node.js 是两种非常流行的选择。…...

编程日记 2025/6/1 4:54:01

典型案例 | 旧PC新蜕变！东北师范大学依托麒麟信安云“旧物焕新生”

东北师范大学始建于1946年，坐落于吉林省长春市，是中国共产党在东北地区创建的第一所综合性大学。作为国家“双一流”建设高校，学校高度重视教学改革和科技创新，校园信息化建设工作始终走在前列。基于麒麟信安云，东北师…...

编程日记 2025/6/3 13:01:38

【UE5】pmx导入UE5，套动作。（防止“气球人”现象。

参考视频：UE5Animation 16: MMD模型與動作導入 (繁中自動字幕) 问题所在： 做法记录（自用） 1.导入pmx，删除这两个。 2.转换给blender，清理节点。 3.导出时，内嵌贴图，选“复制”。 …...

编程日记 2025/6/4 4:45:44

ROS+PX4+Gazebo仿真环境配置全流程解析

上一期文章介绍了我们即将发布的仿真平台，并提到后续需要在Ubuntu系统上进行PX4软件在环仿真。本期文章将为大家详细介绍如何配置Ubuntu环境以及安装ROS和PX4仿真环境。具体配置包括：Ubuntu 20.04 ROS Noetic PX4 Python3。需要注意的是&#xff0c…...

编程日记 2025/6/3 7:16:07

STM32F103单片机HAL库串口通信卡死问题解决方法

在上篇文章 STM32F103单片机使用STM32CubeMX创建IAR串口工程中分享了使用cubeMX直接生成串口代码的方法，在测试的过程中无意间发现，串口会出现卡死的问题。当串口一次性发送十几个数据的时候，串口感觉像卡死了一样，不再接收数据…...

编程日记 2025/6/2 11:01:29

基于微信小程序的电影院订票选座系统ssm+论文源码调试讲解

第2章开发环境与技术本章节对开发基于微信小程序的电影院订票选座系统需要搭建的开发环境，还有基于微信小程序的电影院订票选座系统开发中使用的编程技术等进行阐述。 2.1 Java语言 Java语言是当今为止依然在编程语言行业具有生命力的常青树之一。Java语言最原始…...

编程日记 2025/6/2 20:38:28

解决新安装CentOS 7系统mirrorlist.centos.org can‘t resolve问题

原因 mirrorlist.centos.org yum源用不了解决办法就是 # cd /etc/yum.repos.d/ # mv CentOS-Base.repo CentOS-Base.repo_bak # vim CentOS-Base.repoCentOS系统操作 # mv /etc/yum.repos.d/*.repo /etc/yum.repos.d/*.repo_bak # curl -o /etc/yum.repos.d/CentOS-Linux-Ba…...

编程日记 2025/6/2 11:01:27

分布式系统架构3：服务容错

这是小卷对分布式系统架构学习的第3篇文章，虽然知道大家都不喜欢看纯技术文章，写了也没多少阅读量，但是个人要成长的话，还是需要往深一点的技术上去探索的 1.为什么需要容错分布式系统的本质是不可靠的，一个大的服务…...

编程日记 2025/6/2 7:03:55

鸿蒙项目云捐助第十四讲云函数的初步使用

鸿蒙项目云捐助第十四讲云函数的初步使用在开发项目的过程中，云端充分利用已成为一种驱势。云监控，云运维，云开发，云办公等等软件层出不穷，本地软件云端化也成为一种潮流。在这股大潮中，华为云也是独树一…...

编程日记 2025/6/3 5:53:56

【5G】5G的主要架构选项

最初，在3GPP讨论中考虑了所有可能的聚合和核心网络组合，共有八个架构选项。以下重点介绍option2、3、4和7。 1. 独立组网 (Standalone, SA) 架构选项 2 ：Standalone architecture with 5G-core 特点： 5G核心网（5GC, …...

编程日记 2025/5/30 16:59:23

【Laravel】端口问题导致菜单打不开

以下是修改 Laravel 应用程序的端口配置， 修改环境变量 APP_URL 来实现 app/Providers/AppServiceProvider.php <?phpnamespace App\Providers;use Illuminate\Events\Dispatcher; use Illuminate\Support\ServiceProvider; use Illuminate\Support\Facades\URL…...

编程日记 2025/6/1 8:02:03

网络安全等级保护系统定级流程与示例

一、定级流程安全保护等级初步确定为第二级及以上的等级保护对象，其运营使用单位应当依据《网络安全等级保护定级指南》进行初步定级、专家评审、主管部门审批、公安机关备案审查，最终确定其安全保护等级。二、定级方法等级保护对象的级别由两个定级…...

编程日记 2025/5/28 0:11:03

项目练习：若依-ruoyi系统的部署与运行(前后端分离版)

文章目录一、我的环境二、代码下载三、数据库配置四、项目配置文件修改五、启动运行六、验证一、我的环境 jdk：8 MySQL：5.7 Redis： nodejs：v16.13.2 npm：8.1.2 vue：5.0.8 开发工具 idea Navicat for MyS…...

编程日记 2025/6/2 9:12:52

【UE5 C++课程系列笔记】10——动态单播/多播的基本使用

目录概念申明动态委托一、DECLARE_DYNAMIC_DELEGATE 二、DECLARE_DYNAMIC_MULTICAST_DELEGATE 绑定动态委托一、BindDynamic 二、AddDynamic 三、RemoveDynamic 执行动态委托一、Execute 二、ExecuteIfBound 三、IsBound 四、Broadcast 动态单播使用示…...

编程日记 2025/6/3 13:42:36

Netcat：网络中的瑞士军刀

免责声明：使用本教程或工具，用户必须遵守所有适用的法律和法规，并且用户应自行承担所有风险和责任。文章目录一、引言二、简述三、Netcat功能？四、参数选项五、Netcat 的常见功能六、高级用法多连接处理创建简单的代理七、Netc…...

编程日记 2025/6/4 6:48:05

清理C盘小记

突然C盘就爆满了，想当初还是给他预留了120G的空间，感觉到现在也不够用了，担心出现死机的情况就赶紧进行了清理。有一说一，清理回收站是真的有用。参考：C盘清理指南，清理出30G起，超详细总结&am…...

编程日记 2025/6/3 8:21:18

Qt WORD/PDF（四）使用 QAxObject 对 Word 替换（QWidget）

关于QT Widget 其它文章请点击这里: QT Widget 国际站点 GitHub: https://github.com/chenchuhan 国内站点 Gitee : https://gitee.com/chuck_chee 姊妹篇: Qt WORD/PDF（一）使用 QtPdfium库实现 PDF 操作 Qt WORD/PDF（二…...

编程日记 2025/6/4 11:29:39

软件工程设计的复杂性

复杂性代表事件或事物的状态，它们具有多个相互关联的链接和高度复杂的结构。在软件编程中，随着软件设计的实现，元素的数量以及它们之间的相互联系逐渐变得庞大，一下子变得难以理解。如果不使用复杂性指标和度量，软件…...

编程日记 2025/6/4 1:14:42

《解决两道有趣的编程问题：交替数字和与简单回文》

在编程的世界里，算法和逻辑的挑战无处不在。今天，我们将用 Python 来解决两道有趣的编程问题，分别是计算交替数字和以及生成简单回文。一、交替数字和（Alternating Sum of Numbers） 1. 问题描述给定一系列整数&am…...

编程日记 2025/6/2 1:57:50

C语言(结构体练习)

设计一个结构体,存放一个学员信息并显示，存放两个学员信息，算他们的平均分。 #include <stdio.h> #include <string.h>// 定义结构体 typedef struct {char name[50];float score; } Student;// 函数声明 void display(Student student); f…...

编程日记 2025/6/2 3:41:52

Lumoz主网启航：为ETH3.0、ZK和AI提供无穷算力

一个成熟的区块链主网是技术落地的体现，更是项目战略布局的开端，预示着全球化扩展和技术创新的全面启动。12 月9日，Lumoz主网的正式上线为生态系统注入了强大的潜力，并为未来的技术发展、市场拓展和社区建设提供了坚实的基础&…...

编程日记 2025/6/2 11:01:17

MySQL技术：事务处理与锁机制

在现代数据库系统中，事务处理和锁机制是确保数据一致性和完整性的关键技术。MySQL作为一个强大的关系型数据库管理系统，提供了完善的事务支持和多种锁机制来处理并发数据访问。本文将深入探讨MySQL中的事务处理和锁机制，以及如何有效使用它们…...

编程日记 2025/6/1 5:47:38

uniapp炫酷导航按钮及轮播指示器组件

一个拥有炫酷动效的导航按钮和指示器uniapp组件，帮你构建更炫酷的官网、宣传页、产品介绍等页面。目前测试了vue2语法在h5和微信小程序的适配，其他平台理论上也能用。下载及使用方法地址：iliya-desgin 展示： 目标页面出现在可视…...

编程日记 2025/6/2 1:54:12

gdb调试常用指令及案例讲解

一、常用指令运行 -g：使用该参数编译可以执行文件，得到调试表。编译 # 运行 gdb ./a.out# 设置参数 set args -s ./data/uvd.tcl 控制参数断点 list/l ：list 1 列出源码。根据源码指定行号设置断点。 b …...

编程日记 2025/6/3 16:48:15

LeetCode 刷题笔记

LeetCode 刷题笔记 1. 20241218 （1）2447 std::gcd是C17引入的一个函数，用于计算两个整数的最大公因数。位于<numeric>头文件中。 #include <iostream> #include <numeric> // std::gcdint main() {int a 36;int b 60…...

编程日记 2025/5/31 19:31:22

重新定义页签！Choerodon UI Tabs让管理更高效

01 引言 Tabs 组件通过提供平级区域，将大块内容进行有效的收纳和展现，从而保持界面整洁。但在企业应用的快速发展中，这样传统的页签组件已无法满足我们对界面布局和个性化展示的追求。Choerodon UI Tabs 组件通过支持多级分组、个性化配置、…...

编程日记 2025/6/3 21:10:29

OnlyOffice出现JWT问题和文档下载失败问题解决

一、文档安全令牌未正确形成： 解决方案：禁用jwt，并且重启服务文件位置：C:\Program Files\ONLYOFFICE\DocumentServer\config\local.json "token": {"enable": {"request": {"inbox":fa…...

编程日记 2025/6/3 13:56:31

Python面试常见问题及答案3

一、基础语法相关问题：Python中如何实现多态？ 答案：在Python中，多态是一种动态类型机制的体现。比如，通过定义一个具有相同方法名的类，不同的类可以根据自身的定义实现这个方法的不同行为。例如&#xff…...

编程日记 2025/6/2 11:01:11

【Java学习笔记】多线程基础

并行：同一时刻，多任务同时进行多任务分别进行一、线程相关概念 1.程序是为完成特定任务、用某种语言编写的一组指令的集合。简单的说:就是我们写的代码 2.进程 （1）进程指的就是运行中的程序，比如我们使用QQ,就…...

编程日记 2025/6/3 18:53:53

使用stm32的ADC和NTC热敏电阻R值是10k，B值是3950的测温程序

首先要明确NTC热敏电阻的阻值是随温度升高，电阻降低的一个特性，加上拉电阻10K，不过一下子没有找到10K的上拉电阻，就用了一个8.2K的上拉电阻到3.3V，测温电阻一端接地，中间接stm32的PA1使用ADC测电压来计算温…...

编程日记 2025/6/3 22:57:40

详细解读BSCI验厂

BSCI验厂是指BSCI（Business Social Compliance Initiative）倡议商界遵守社会责任组织对BSCI组织成员的全球供应商进行的社会责任审核。以下是对BSCI验厂的详细解读： 一、BSCI验厂的定义与背景定义：BSCI验厂是企业社会责任验厂的…...

编程日记 2025/6/2 10:09:00

Visual Studio 2022 QT5.14.2 新建项目无法打开QT的ui文件，出现闪退情况

新建 Qt Widgets Application项目，如下图： 点击下一步： 项目创建成功如下： 提示异常如下图： ***.ui 无法打开文件。提供三种解决办法，本文使用第二种方式解决，选择适合您的解决方法&#x…...

编程日记 2025/5/30 22:57:10

Unity3D制作MMORPG所需知识点详解

前言在制作一款大型多人在线角色扮演游戏（MMORPG）时，Unity3D引擎提供了丰富的功能和工具，但开发者需要掌握一系列关键技术和知识点。本文将详细介绍使用Unity3D制作MMORPG所需的关键知识点和技术细节。对惹，这里有…...

编程日记 2025/6/3 21:40:45

Coding Caprice - monotonic stack2

42. 接雨水 class Solution { public:int trap(vector<int>& height) {stack<int> sh;int out 0;for(int i0; i<height.size(); i){while(!sh.empty() && height[sh.top()]<height[i]){int bo height[sh.top()];sh.pop();if(sh.empty()){brea…...

编程日记 2025/5/30 14:46:47

Android Stduio 2024版本设置前进和后退按钮显示在主界面

Android Studio 2024（Ladybug）安装后发现前进和后退按钮不显示在主界面的工具栏，且以前在View中设置的办法无效： Android Studio 2024（Ladybug）的设置方式： File->Settings->Appearance&…...

编程日记 2025/6/2 11:01:07

NFT与NFT数据的区别

NFT与NFT数据的区别 NFT与NFT数据的区别 NFT（非同质化代币） NFT是一种基于区块链技术的数字资产。它具有独一无二的特性，就像现实生活中的艺术品原作，每一个NFT都有其独特的标识，无法被其他资产替代。例如，一幅数字画作以NFT的形式存在，它的所有权信息、创作背景、作者签…...

编程日记 2025/6/2 11:01:05

默认插槽

相关文章：