如何在Vue插槽中获取索引

tsm1rwdh  于 2023-05-29  发布在  Vue.js
关注(0)|答案(1)|浏览(326)

在父组件中,我呈现一个Carousel组件(子组件),并将插槽的内容传递到内部。
在carousel组件中,我想获取插槽内容的索引,并将其传递给运行函数changeSlide(index)。如何从<slot>内部获取传递内容的索引?
父组件

<Carousel>
  <template #menu="{onChangeSlide}">
    <template v-for="(label, index) in args.testLabel" :key="index">
      <Button @click="onChangeSlide" :label="label" :index="index" />
    </template>
  </template>
</Carousel>

转盘组件

<template>
  <div>
    <slot
      name="menu"
      :on-change-slide="() => changeSlide(index)". //Want to get the index of the content here
    />
  </div>
</template>
4xrmg8kj

4xrmg8kj1#

最后我能这样做。
我在父组件中将@click="onChangeSlide"更改为@click="onChangeSlide(index)",但还必须在carousel组件中将:on-change-slide="() => changeSlide(index)"更改为:on-change-slide="changeSlide"
父组件

<Carousel>
  <template #menu="{onChangeSlide}">
    <template v-for="(label, index) in args.testLabel" :key="index">
      <Button @click="onChangeSlide(index)" :label="label" :index="index" />
    </template>
  </template>
</Carousel>

转盘组件

<template>
  <div>
    <slot
      name="menu"
      :on-change-slide="changeSlide"
    />
  </div>
</template>

相关问题