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)

相关推荐

socket编程

CSS单行文本溢出时显示省略号

吴恩达机器学习作业Python实现(一):线性回归

最新计算机毕业设计选题推荐 - 毕设选题建议

深度|为什么一定要从DevOps走向BizDevOps?

vue封装原生的可预览裁剪上传图片插件H5,PC端都可以使用

ORACLE基本表操作常用语句整理

Redis——布隆过滤器

Redis实战案例及问题分析之redis解决商户缓存以及相应缓存问题解决方案(穿透、雪崩、击穿)

基于react antd的表单显隐控制

Python+matplotlib实现循环作图的方法详解

C++阶段03笔记01【内存分区模型、引用、函数提高】

无需CORS,用nginx解决跨域问题,轻松实现低代码开发的前后端分离

基于eBPF的云原生可观测性开源项目Kindling之网络详情面板

想要替代 C 与 Java 的后浪们,现今如何?

数据库中间件 Mycat(三)安全设置与监控工具

Pandas向本地Excel已存在的工作表追加写入DataFrame

51单片机仿真——蜂鸣器

IDEA创建工程的步骤

生成扩散模型漫谈:DDPM = 自回归式VAE

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

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

桂ICP备16001015号