Vue3 插槽 v-slot

插槽

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

  1. 不使用插槽的情况下

    结果:

1 默认插槽

在子组件中只能有一个

结果:

2 具名插槽

  • #bv-slot:b 的缩写

顾名思义就是指着名字去插入

结果:

3 作用域插槽

  • 可以传递数据的插槽,子组件可以将数据回传给父组件,父组件可以决定这些回传数据是以何种结构或者外观在子组件内部去展示

    在父组件中也可以通过v-slot进行解构
html 复制代码
<template>
    <test3 :data="testData">
        <template v-slot="{$a,b}">
            <span :style="{backgroundColor:$a.todo?'red':'blue'}">
                第{{b}}条数据:内容是{{ $a }}
            </span>
        </template>
    </test3>
</template>

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

html 复制代码
<slot>当父组件没有数据要插入时,这里显示本语句</slot>
相关推荐
开发者小天1 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
程序员杨工6 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky8 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
Pu_Nine_99 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
一个处女座的程序猿O(∩_∩)O9 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
姜至10 小时前
el-calendar实现自定义展示效果
前端·vue.js
拉不动的猪10 小时前
webpack分包优化简单分析
前端·vue.js·webpack
麦麦大数据11 小时前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
麦麦大数据11 小时前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱