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>
相关推荐
csgo打的菜又爱玩2 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
gerrgwg5 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
星晨雪海8 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6668 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
wxr061613 小时前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
一个很帅的帅哥14 小时前
Vue中的data为什么是函数?
前端·javascript·vue.js·data
小刘鸭地下城14 小时前
深入解析 Vue 的异步 DOM 更新机制:nextTick 的正确使用指南
vue.js
一个很帅的帅哥16 小时前
Vue keep-alive
前端·javascript·vue.js·keep-alive
一条有腹肌的咸鱼19 小时前
vue3+vite+element-plus封装npm插件遇到的问题,求大神搭救
vue.js