如何获取 VueJS 组件中的槽数

Question

我需要我的组件来获取父组件占用的插槽号
例如：

这是组件：

<template>
  <div>
    <slot/>
  </div>
</template>
<script>
  name: 'comp',
  data() {
    return {
      nslot: 0
    }
  }
</script>

这是父母

<template>
  <div>
    <component>
      <button slot=""></button>
      <button slot=""></button>
      <button slot=""></button>
      <button slot=""></button>
      ...
    <component/>
  </div>
</template>
<script>
  name: 'comp'
</script>

我该怎么办？ 我想在“nslot”变量中获取已使用插槽的数量

我更喜欢使用方法，（在组件中）像：

mounthed() {
  this.nslot = this.getslotnumber()
}

Answer 1

您应该使用像这样的作用域插槽：

<template>
  <div>
    <slot :nslot="nslot" />
  </div>
</template>
<script>
  name: 'comp',
  data() {
    return {
      nslot: 0
    }
  }
</script>

在父母：

<template>
  <div>
    <compt v-slot="{nslot}">
      <button :slot="nslot">{{nslot}}</button>
    <comp/>
  </div>
</template>
<script>
  name: 'comp'
</script>