Vue初学-插槽slot

发布时间:2023-12-30 12:30

匿名插槽



    
    
    Document
    


    
我是插槽的内容

我们使用slot标签在组件中定义插槽,当我们在调用组件的标签内写入内容的时候,这段内容会替换匿名的插槽,slot标签相当于一个占位符。
1.当插槽标签中有内容,而且组件标签内未插入任何数据时,页面会显示插槽标签内的内容,相当于是插槽的默认值。但是如果组件标签内插入了任意数据,页面则会显示组件标签插入的内容。 代码如下:




    
    
    Document
    


    

2.如果有多个匿名插槽,则组件标签内的数据,会插入到所有的匿名插槽中。 代码如下:




    
    
    Document
    


    

3.插槽中不仅可以插入数据,还可以插入模板和html代码。 代码如下:




    
    
    Document
    


    
具名插槽



    
    
    Document
    


    

在slot标签中使用name属性为每一个插槽指定名称,使用v-slot指令来指定数据应该插入的哪一个具名插槽中,需要重点注意的是v-slot这个指令只能写在template标签中

作用域插槽



    
    
    Document
    

    
  • 作用域插槽只能是具名插槽。
  • 这里不能再使用v-slot指定数据要插入的具名插槽的名称,而是使用slot属性来指定插槽的名称。
  • 使用slot-scope属性来接收绑定到插槽上的数据。
  • 在插槽中为属性绑定数据时,属性的名称不能有大写字母,如果属性中有包含了小横线(如上图的user-info),那么在调用的地方需要转换成对应的驼峰命名法(如上图的data.userInfo.name)

相关推荐

龙哥手把手教你学LabVIEW视觉-深度学习简明教程【halcon篇】

基于SSM的音乐视频网站的设计与实现

GPU版本PyTorch详细安装教程

字节跳动 Flink 状态查询实践与优化

【图像搜索】基于pytorch官方预训练模型的简易相似图片搜索

Linux企业运维——Redis部署+redis主从复制+redis主从自动切换(基于sentinel哨兵模式)+集群+redis+mysql 的缓存服务器+配置 gearman 实现数据同步

vue实现伸缩菜单功能

社交网络的数据挖掘与分析,什么是社交网络分析

远远被大家低估了的实用智能家居设备——窗帘电机

程序员必备的10个unity小技巧!!!

OpenCV OAK相机对比及介绍

【牛客网面经整理】7.20shopee一面面经,加入我自己整理的相关拓展问题(redis))

3.3.3 无线局域网和 3.3.4 PPP协议和HDLC协议

指针c语言与数组,C语言指针与数组

微信小程序实战

2 年前端 7~9 月面试经历总结

python从入门到项目实战——基础语法

详解Java中AC自动机的原理与实现

spark源码(六)spark如何通过BlockManager控制数据的读写

k8s入门之Secret(十)

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号