Vue 中的 插槽(slot)? 它有什么作用?
ztj100 2025-07-03 02:28 8 浏览 0 评论
sot（插槽）是 Vue 中的一个重要功能，它允许我们向组件传递模板内容。主要有以下几个要点:
一、基本概念
插槽是组件内的一个占位符，让我们可以向组件内部插入内容。父组件可以在使用子组件时，在子组件标签内传入内容，这些内容会被渲染到子组件内部的slot 标签位置。
二、使用方式
子组件中使用 slot 标签定义插槽位置:
html：
<template>
<div>
<slot></slot>
</div>
</template>
父组件中使用:
html：
<ChildComponent>
这里的内容会被插入到子组件的插槽位置
</ChildComponent>
三、插槽类型
- 默认插槽: 没有名字的插槽，每个组件只能有一个。
- 具名插槽: 带有 name 属性的插槽，可以有多个。使用 template 和 v-slot 指令来指定内容应该插入到哪个具名插槽。
- 作用域插槽: 能够接收子组件传递的数据的插槽
扩展知识
一、具名插槽的使用
子组件定义具名插槽:
html：
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
父组件使用具名插槽:
html：
<BaseLayout>
<template v-slot:header >
<h1>页面标题</h1>
</template>
<template v-slot:default >
<p>主要内容</p>
</template>
<template v-slot:footer >
<p>页脚内容</p>
</template>
</BaseLayout>
二、作用域插槽
子组件传递数据:
html：
<slot :text="greetingMessage" :count="1"></slot>
父组件接收数据:
html：
<MyComponent v-slot="slotProps">
{{ slotProps.text }}{{ slotProps.count }}
</MyComponent>
三、插槽的特点
- 插槽内容可以访问到父组件的数据作用域
- 插槽内容无法访问子组件的数据作用域
- 默认内容 :slot 标签可以包含默认内容，当父组件没有提供内容时显示
html：
<slot>这是默认内容</slot>
四、插槽的应用场景
- 内容分发:比如页面布局组件
- 组件复用:通过插槽提供内容的灵活性
- 组件封装:保持组件的可扩展性
相关文档链接：
https://cn.vuejs.org/guide/components/slots.html
相关推荐
- 人生苦短，我要在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)