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