526互联

v-slot带有属性（v-slot:slotName="xxx"）传递的具名插槽在子组件中无法通过$slots获取该插槽内容（$slots为空对象）的解决办法

发布时间 2023-09-05 10:05:27作者: Z哎呀

本例讨论的是带有属性属性传递的情况，即有等号后面这段的情况。如果没有，v-slot:slotName是可以正常获取到的（虽然$slots显示为空，但$slots.slotName还是能正确获取到的，可通过设计一个点击按钮，打印log的方式验证）

解决办法

slot标签有一个特点，当没有该具名插槽时，会默认显示标签包裹的内容。隐藏可使用不断嵌套的方式代替v-if v-else的方式，如：

<slot name="slotName">
	当没有slotName具名插槽时，会显示该内容
	<slot name="slotName1">
		当没有slotName1具名插槽时，会显示该内容
	</slot>
</slot>