前端流行框架Vue3教程:19. 插槽slot(1)
ztj100 2025-07-03 02:28 7 浏览 0 评论
19. 插槽slot（1）
我们已经了解到组件能够接收任意类型的JavaScript值作为props，但组件要如何接收模板内容呢？
在某些场景中，我们可能想要为子组件传递一些模板片段让子组件在它们的组件中渲染这些片段
什么是插槽？
插槽是 Vue 中组件内容分发的机制，允许你在父组件中向子组件传递任意 HTML 内容。
示例代码解析
子组件：SlotsBase.vue
<template>
<h3>插槽基础知识</h3>
<slot></slot> <!-- 插槽出口 -->
</template>- <slot></slot> 是一个插槽出口，表示在使用该组件时可以插入自定义内容。
- 在这个例子中，我们定义了一个标题 “插槽基础知识”，下方是一个默认插槽。
父组件：App.vue
<template>
<SlotsBase>
<div>
<h3>插槽标题</h3>
<p>插槽内容</p>
</div>
</SlotsBase>
</template>
<script>
import SlotsBase from "@/components/SlotsBase.vue";
export default {
components: {
SlotsBase
}
};
</script>- 我们在 App.vue中引入并使用了 SlotsBase 组件。
- 使用方式 <SlotsBase>...</SlotsBase> 标签之间的内容会替换掉子组件中的 <slot></slot>。
总结
- 子组件通过 <slot></slot> 定义插槽入口。
- 父组件在使用子组件时，在其标签内部写入内容即可传入插槽。
- 插槽内容支持任何 HTML 元素和结构。
<slot>元素是一个插槽出口(slotoutlet)，标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染
相关推荐
- 人生苦短，我要在VSCode里面用Python
-
轻沉发自浅度寺量子位出品|公众号QbitAI在程序员圈子里，VisualStudioCode（以下简称VSCode）可以说是目前最火的代码编辑器之一了。它是微软出品的一款可扩展的轻量...
- 亲测可用:Pycharm2019.3专业版永久激活教程
-
概述随着2020年的到来，又有一批Pycharm的激活码到期了，各位同仁估计也是在到处搜索激活方案，在这里，笔者为大家收录了一个永久激活的方案，亲测可用，欢迎下载尝试：免责声明本项目只做个人学习研究之...
- Python新手入门很简单（python教程入门）
-
我之前学习python走过很多的歧途，自学永远都是瞎猫碰死耗子一样，毫无头绪。后来心里一直都有一个做头条知识分享的梦，希望自己能够帮助曾经类似自己的人，于是我来了，每天更新5篇Python文章，喜欢的...
- Pycharm的设置和基本使用（pycharm运行设置）
-
这篇文章，主要是针对刚开始学习python语言，不怎么会使用pycharm的童鞋们；我来带领大家详细了解下pycharm页面及常用的一些功能，让大家能通过此篇文章能快速的开始编写python代码。一...
- 依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!
-
我真的想知道作者到底咋把PyTorch教程整得这么牛的啊？明明在内容上已经足以成为付费教材了，但作者偏要免费开源给大家学习！...
- 手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace
-
这期教向大家介绍仅仅1.3M的轻量级高精度的关键点人脸检测模型DBFace，并手把手教你如何在自己的电脑端进行部署和测试运行，运行时bug解决。01.前言前段时间DBFace人脸检测库横空出世，...
- 进入Python的世界02外篇-Pycharm配置Pyqt6
-
为什么这样配置，要开发带UI的python也只能这样了，安装过程如下：一安装工具打开终端：pipinstallPyQt6PyQt6-tools二打开设置并汉化点击plugin，安装汉化插件，...
- vs code如何配置使用Anaconda（vscode调用anaconda库）
-
上一篇文章中（Anaconda使用完全指南），我们能介绍了Anaconda的安装和使用，以及如何在pycharm中配置Anaconda。本篇，将继续介绍在vscode中配置conda...
- pycharm中conda解释器无法配置（pycharm配置anaconda解释器）
-
之前用的好好的pycharm正常配置解释器突然不能用了？可以显示有这个环境然后确认后可以conda正在配置解释器，但是进度条结束后还是不成功！！试过了pycharm重启，pycharm重装，anaco...
- Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!
-
我们都知道现在已经进入了Rust时代，不仅很多终端常用的工具都被rust重写了，而且现在很多前端工具也开始被Rust接手了，这不，现在就出现了一款JS工具管理工具，有了它，你可以管理多版本的js工具，...
- 开发者的福音，ElectronEgg: 新一代桌面应用开发框架
-
今天给大家介绍一个开源项目electron-egg。如果你是一个JS的前端开发人员，以前面对这项任务桌面应用开发在时，可能会感到无从下手，甚至觉得这是一项困难的挑战。ElectronEgg的出现，它能...
- 超强经得起考验的低代码开发平台Frappe
-
#挑战30天在头条写日记#开始进行管理软件的开发来讲，如果从头做起不是不可以，但选择一款免费的且经得起时间考验的低代码开发平台是非常有必要的，将大幅提升代码的质量、加快开发的效率、以及提高程序的扩展性...
- 一文带你搞懂Vue3 底层源码（vue3核心源码解析）
-
作者：妹红大大转发链接：https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...
- 基于小程序 DSL(微信、支付宝)的，可扩展的多端研发框架
-
Mor(发音为/mr/，类似more)，是饿了么开发的一款基于小程序DSL的，可扩展的多端研发框架，使用小程序原生DSL构建，使用者只需书写一套（微信或支付宝）小程序，就可以通过Mor...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 人生苦短，我要在VSCode里面用Python
- 亲测可用:Pycharm2019.3专业版永久激活教程
- Python新手入门很简单（python教程入门）
- Pycharm的设置和基本使用（pycharm运行设置）
- 依旧是25年最拔尖的PyTorch实用教程!堪比付费级内容!
- 手把手教你 在Pytorch框架上部署和测试关键点人脸检测项目DBFace
- 进入Python的世界02外篇-Pycharm配置Pyqt6
- vs code如何配置使用Anaconda（vscode调用anaconda库）
- pycharm中conda解释器无法配置（pycharm配置anaconda解释器）
- Volta:跨平台开发者的福音，统一前端js工具链从未如此简单!
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)