vue：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

我是默认插槽

3、结果：

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

使用场景：

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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