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)

相关推荐

相比手机操作、语音助手,智能传感器有什么优点?

Cesium加载离线地图和离线地形

MyBatis基本源码流程

Docker之Tomcat容器连接mysql容器

网络安全--使用Kali进行ARP欺骗(详细教程)

MyBatis教程[1]----项目构建并完成第一个查询操作

几行代码,轻松搞定 SpringBoot 接口恶意刷新和暴力请求!

c# this和base区别

「媒体转码工具」Permute 3,帮你轻松转换视频格式!

【专题】多角度深入解析开放原子开源基金会

详解双向带头循环链表~

MyBatis-Plus:MyBatis-Plus的具体介绍与使用

继续学习python和数据分析_做数据分析,你终究还是要学 Python

云计算基础-0

vue路由跳转了但界面不显示的问题及解决

以太坊测试网络搭建

手把手教你基于LXD用OAK-D和ROS noetic做ORB SLAM3

VUE组件与插槽

那些让人惊叹的文学

The 2022 Hangzhou Normal U Summer Trials

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

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

桂ICP备16001015号