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>
相关推荐
vvilkim8 分钟前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜11 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
BillKu36 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
猿究院_xyz1 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
醋醋2 小时前
vue2源码记录4
前端·vue.js
前端大白话3 小时前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
HuaHua的世界3 小时前
说说Vue 模板是如何编译的?
vue.js·面试
Jet_closer_burning3 小时前
axios封装
前端·javascript·vue.js·react.js·ajax
764333 小时前
Nuxt3-Vue3
前端·javascript·vue.js
佛系菜狗3 小时前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js