如何在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>

我该怎么做？我想在“n时隙”变量中得到已使用的插槽的数目。

我更喜欢使用方法，(在组件中)如下：

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>