当前位置: 首页 > article >正文

Vue3 插槽 v-slot

插槽

视频链接:尚硅谷vue-插槽章节

  1. 不使用插槽的情况下
    在这里插入图片描述
    结果:
    在这里插入图片描述

1 默认插槽

在子组件中只能有一个
在这里插入图片描述
结果:
在这里插入图片描述

2 具名插槽

  • #bv-slot:b 的缩写

顾名思义就是指着名字去插入
在这里插入图片描述
结果:
在这里插入图片描述

3 作用域插槽

  • 可以传递数据的插槽,子组件可以将数据回传给父组件,父组件可以决定这些回传数据是以何种结构或者外观在子组件内部去展示
    在这里插入图片描述
    在父组件中也可以通过v-slot进行解构
<template>
    <test3 :data="testData">
        <template v-slot="{$a,b}">
            <span :style="{backgroundColor:$a.todo?'red':'blue'}">
                第{{b}}条数据:内容是{{ $a }}
            </span>
        </template>
    </test3>
</template>

4. <slot>:父组件没有使用该标签时

<slot>当父组件没有数据要插入时,这里显示本语句</slot>

http://www.kler.cn/a/134749.html

相关文章:

  • vue面试题7|[2024-11-14]
  • Vue.js 项目创建流程
  • 2024-11-13 学习人工智能的Day26 sklearn(2)
  • HarmonyOS 如何实现传输中的数据加密
  • Redis高可用-主从复制
  • MYSQL 库,表 基本操作
  • 【目标测距】雷达投影测距
  • 前端JS模块化对外暴露的三种方法
  • 纯CSS实现炫酷文本阴影效果
  • 石油石化物资采购杂志社石油石化物资采购编辑部2023年第18期部分目录
  • 【Spring Boot】如何自定义序列化以及反序列器
  • 《轻购优品》新零售玩法:消费积分认购+众筹新玩法
  • 【Linux】进程间通信 -- 共享内存
  • Python算法——树的镜像
  • CentOS7 设置 nacos 开机启动
  • 字节8年经验之谈 —— 性能测试的流程及常用工具介绍!
  • 【精选】JSP技术知识点大合集
  • python批量为视频添加文字水印和图片水印的程序
  • 4、FFmpeg命令行操作7
  • 优步让一切人工智能化
  • 类型体系与基本数据类型(第五节)
  • mybatis使用foreach标签实现union集合操作
  • 如何利用1688批发市场价格做跨境代购业务?(API数据接口)
  • 软件测试/测试开发丨人工智能在软件测试领域的崭新前景
  • GPT-4充当“规划师、审计师”,颠覆性双层文生图表模型
  • openssl1.0.2版本Windows安装问题