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>
相关推荐
ElasticPDF-新国产PDF编辑器10 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin11 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌12 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光12 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs12 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石12 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking14 小时前
解决 axios get请求瞎转义问题
vue.js
向阳25614 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特14 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~14 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习