【vue】插槽

本文详细介绍了Vue中的插槽概念,包括默认插槽、具名插槽及作用域插槽的使用方法,帮助开发者更好地理解如何在子组件中预留可由父组件定制的内容区域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文档

官网:https://v2.cn.vuejs.org/v2/guide/components-slots.html
尚硅谷视频:https://www.bilibili.com/video/BV1Zy4y1K7SH?p=102

默认插槽

我的理解就是:子组件留了一块可以在父组件里面配置的片段

使用:
子组件定义一个插槽:
在这里插入图片描述
父组件中告诉子组件用什么替换<slot></slot>
在这里插入图片描述

具名插槽

具名插槽可以让我们在子组件中定义多个插槽

使用:
子组件中定义插槽,并用name属性区分不同的插槽
在这里插入图片描述
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
父组件中通过v-slot:xx(其中,xx是子组件中slot的属性值) 向指定插槽插入内容:
在这里插入图片描述
中间的两个会放在没有name属性的slot中

注意:
v-slot 只能添加在 <template>上,如果想要放在其他地方,可以用slot属性,下图展示了两种写法:
在这里插入图片描述
需要注意的是,slot的属性值写在双引号中!
另外,上图中两个只能用其中的一个,如果两个同时使用,则只会展示第二个!

作用域插槽

用于父组件需要用到子组件中的数据
在这里插入图片描述

例如:
子组件中定义了一个插槽:
在这里插入图片描述

父组件想要修改slot处显示的值,但是user数据在子组件中,父组件无法直接获得;
我们可以通过在子组件中绑定属性来向父组件传值!

例如下图中,我们把子组件中user通过user属性传给插槽的使用者(父组件)
在这里插入图片描述
父组件中取值:
在这里插入图片描述
值得注意的是,取到的值是一个对象,它的key是子组件定义的属性,value才是真正传的值,因此,上图中通过slotProps.user来取子组件传过来的user
也就是:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值