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)

相关推荐

React的受控组件和非受控组件介绍

stm32F103 基于HAL库的直流电机驱动(一)

自编码器 AE(AutoEncoder)程序

React向路由组件传参的三种方式

svd在matlab中的使用,matlab - 使用SVD在MATLAB中压缩图像 - 堆栈内存溢出

*电力系统与算法之美(Python&Matlab代码)

事件抽取浅尝

基于Qt实现SVG图片浏览器

Js-dom增删改

(Windbg调试二)C++ delete指针后依然可以访问的问题

Unity3D UGUI 性能耗费最小的一种UI渲染方式RawImage实现,圆角矩形,圆形,多边形等图片

《痞子衡嵌入式半月刊》 第 58 期

STM32F103 基本定时器 (P2MDA-KM4)

docker安装halo+mysql+nginx搭建个人博客

记录实现deeplabv3遇到的问题以及环境搭建。

Spark SQL functions.scala 源码解析(八)DateTime functions (基于 Spark 3.3.0)

BUUCTF MISC刷题

【论文阅读】Deep Neural Networks for Learning Graph Representations | day14,15

cs224w(图机器学习)2021冬季课程学习笔记9 Graph Neural Networks 2: Design Space

springboot整合xxl-job分布式任务调度平台

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

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

桂ICP备16001015号