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)



  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值