vue 如何获取插槽的数量

在 Vue 中，我们可以通过 $slots 属性来获取当前组件的所有插槽，然后通过遍历 $slots 对象来获取插槽的数量。

例如，下面的代码演示了如何获取一个名为 default 的插槽的数量：

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  mounted() {
    const slots = this.$slots.default || []
    const slotCount = slots.length
    console.log(`default slot count: ${slotCount}`)
  },
}
</script>

在上面的代码中，我们在组件的模板中定义了三个相同的插槽，并在组件的 mounted 钩子函数中获取了 default 插槽的数量。如果插槽不存在，则默认插槽的数量为 0。

注意，如果插槽中包含具名插槽，则可以使用 $slots[slotName] 来获取指定名称的插槽。例如，如果我们有一个名为 header 的插槽，我们可以使用 this.$slots.header 来获取它的内容。