Vue3 统计slot数量

const slots = useSlots()
const slotCount = computed(() => slots.default?.()?.length ?? 0)

有个小坑
当你的代码是如下格式

<SliderPagesX :init-position="0">
	<!-- 页面1 -->
	<SliderPage>
	1
	</SliderPage>
	<!-- 页面2 -->
	<SliderPage>
	2
	</SliderPage>
</SliderPagesX>

SliderPagesX这个父组件使用文章开头的两行代码去统计插槽数量，数量竟然不是2，而是4…

原因是Vue3中利用useSlots().default()?.length的方式来获取插槽数量时，计数是会将注释视为标签，这是因为Vue编译器会将所有节点（包括注释节点）编译到渲染函数中。
如果你想要忽略注释节点，可以在获取插槽数量的时候，利用Array.prototype.filter方法以过滤掉注释节点。

代码如下

console.log(slots.default?.().filter((item) => (item.type as any).name === 'SliderPage'))

不清楚dom结构的可以打印看看

slots.default?.()

最后我统计数量的代码如下，根据标签名称去过滤，当然每个人需求不同，你也可以设置只忽略注释，或者允许多种name的标签…

const slots = useSlots()
const slotCount = computed(
  () => slots.default?.().filter((item) => (item.type as any).name === 'SliderPage').length ?? 0
)