Vue进阶（幺贰捌）：Vue插槽：slot、slot-scope与指令v-slot应用讲解_v-slot productdevice(1)

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

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

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

![在这里插入图片描述](https://img-blog.csdnimg.cn/202006141032262.png#pic_center)


### 三、具名插槽

这里是头部

//具名插槽使用

这里是尾部

//具名插槽

这里是Test组件

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200614103313262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70#pic_center)


### 四、v-slot


`v-slot`在组件中使用`slot`进行占位时，也是在`slot`标签内使用`name` 属性给`slot`插槽定义一个名字。但是在`html`内使用时就有些不同了。需要使用`template`模板标签，`template`标签内，使用`v-slot`指令绑定插槽名，标签内写入需要添加的内容。

//v-slot指令使用插槽

slot头部内容

     <p>直接插入组件的内容</p>
     
     <template v-slot:footer>
        <h2>slot尾部内容</h2>
     </template>
  </Test>

//具名插槽

主体内容部分

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200614103544651.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ==,size_16,color_FFFFFF,t_70#pic_center)


### 五、slot-scope 与 v-slot


#### 5.1 slot-scope



> 
> 1. 在组件模板中书写所需`slot`插槽，并将当前组件的数据通过`v-bind`绑定在`slot`标签上。
> 2. 在组件使用时，通过`slot-scope=“scope”`,接收组件中`slot`标签上绑定的数据。
> 3. 通过`scope.xxx`就可以使用绑定数据了
> 
> 
> 

//作用域插槽的用法（slot-scope） {{ scope.msg }}

  </Test>

这里是test组件

### 结尾

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

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)