Web前端最全vue：slot（插槽）详解：父组件的内容放到子组件指定的位置(2)，前端学习笔记在互联网上火了

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一、单个slot（基本用法）

二、多个slot（具名插槽）

三、作用域插槽（子组件向父组件传值）

---

---

slot插槽：父组件的内容放到子组件指定的位置

=======================

应用场景：

---

项目中有很多地方需要调用一个组件，比如弹窗，但是内容又不固定，有个可能弹出是表格，有的可能弹出是照片，这个决定于需要调用这个子组件的父组件，这种情况下就可以在自组建（这个弹窗中）使用slot，占坑，slot的HTML元素和内容，完全取决于使用他的父组件给他传了啥。

作用：

---

子组件a.vue中slot标签的作用实际上就是占坑，站着位置，等待使用a.vue的父组件 content 时候，content的全部内容（包括文字、html元素）全部替代a.vue中设置的位置。

分类

–

一、单个slot（基本用法）

用法：

1、子组件中

//子组件child.vue中内容

首页

//这里是子组件中固定部分，没用slot

非固定部分 //这里是使用了slot部分，不固定，如果有给他传东西了，就会被替代，不传

则保留

2、父组件中

首先要把这个子组件注册到父组件中，具体省略，注册完后，子组件就可以当做一个标签使用。

花花花花花 //child标签之间的内容，不管是HTML元素还是文字都会全部替代

child.vue中 slot标签中的内容

3、结果

二、多个slot（具名插槽）

使用场景：

同一个组件，不同位置需要放置不同内容，比如有题目，文字，图片组合，那就可以设置多个slot，分别占坑，每个slot设置个名字，然后使用时候根据名字找到对应的slot，替换内容。

使用步骤：

1、子组件中定义多个插槽，以name属性区分

标题：

内容：

文字：

默认：

2、父组件中以template标签引入，并使用v-slot(v-slot 缩写为字符 #)绑定相应插槽的name属性作为区分

我是标题

我是内容

我是文字

//default指向的是不带name属性的slot

我是默认插槽

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-cGXuv6BF-1715179306057)]

[外链图片转存中…(img-pKlLUvIk-1715179306058)]