槽口(插槽)

本文详细介绍了Vue中组件嵌套时如何利用插槽(slot)进行内容渲染,包括匿名插槽、具名插槽和作用域插槽的使用。强调了具名插槽的使用优势,以及避免使用匿名插槽以减少不确定性。同时,提到了v-slot的使用限制及其与已废弃slot属性的区别。
摘要由CSDN通过智能技术生成

在实现组件嵌套的时候,子组件标签里面的内容无法渲染出来,就可以使用槽口,在子组件内开辟出一个槽口《slot》《/slot》【就相当于给子组件标签内的内容留出一片空地,得以显示内容】

具名槽口和匿名槽口可以同时使用。

具名槽口和匿名槽口同时使用时,具名槽口输出具名槽口的内容,匿名槽口输出没有名字的内容,互不干涉

子组件: 具名插槽 slot插槽 name名字 在一起就是具名插槽

父组件: slot='名字'

组件嵌套,非要用到自己组件的数据,就开一个作用域空间(作用域槽口)

注意 v-slot 只能添加在  上 (只有一种例外情况),这一点和已经废弃的 slotattribute 不同。

这里其实还有一个未命名插槽,也就是默认插槽,捕获所有未被匹配的内容。上述两个示例的 HTML 渲染结果均为:

匿名插槽以匿名作用域插槽模板为准进行渲染,即使你把匿名插槽模板放后面,也是一样的结果;

由此可以看出,最好不要使用匿名、默认插槽,最好使用具名插槽,可以减少不确定性;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值