如何獲取 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>