如何在Vue插槽中获取内容索引以调用changeSlide函数？

你现在的问题核心是子组件无法直接获取父组件v-for循环里的局部index变量，正确的处理方式是让父组件在调用子组件提供的方法时，主动把index传递进去，具体修改如下：

1. 修改Carousel子组件 #

把插槽传递的on-change-slide改成接收参数的函数，直接绑定到changeSlide方法（用箭头函数包裹接收参数也可，效果一致）：

<template>
  <div>
    <!-- 直接将changeSlide方法传给插槽，也可写成(index) => changeSlide(index) -->
    <slot name="menu" :on-change-slide="changeSlide" />
  </div>
</template>

<script setup>
const changeSlide = (index) => {
  // 这里就能拿到父组件传过来的index，执行你的业务逻辑
  console.log('切换到第', index, '个幻灯片')
}
</script>

2. 修改父组件 #

在Button的点击事件里，把当前v-for循环的index传给onChangeSlide方法：

<Carousel>
  <template #menu="{ onChangeSlide }">
    <template v-for="(label, index) in args.testLabel" :key="index">
      <!-- 调用子组件提供的方法时，主动传入当前循环的index -->
      <Button @click="() => onChangeSlide(index)" :label="label" :index="index" />
    </template>
  </template>
</Carousel>

逻辑说明 #

父组件v-for生成的index是父组件的局部变量，子组件的插槽无法直接读取。通过父组件调用子组件方法时主动传参的方式，就能把父组件的index传递给子组件的changeSlide函数，让子组件获取到对应索引执行后续逻辑。

内容的提问来源于stack exchange，提问作者user16589580