Vue组件如何自动识别自身在父级插槽兄弟节点中的索引，无需硬编码index属性

两种适配Vue 3响应式体系的无硬编码实现方案，完全可以替代手动传入index的传统模式。

• 方案一：父组件扫描插槽VNode自动注入索引
  Vue的插槽内容本质是父级传递给容器组件的VNode数组，容器组件可以在渲染插槽前遍历原始VNode列表，遍历过程中拿到每个节点在序列中的位置，将索引作为自动注入的prop传递给匹配的子组件，开发者编写模板时完全不需要手动填写index属性。
  容器组件（以CompA为例）的核心实现：

  <template>
    <div class="comp-a">
      <!-- 渲染经过索引注入处理的插槽内容 -->
      <slot></slot>
    </div>
  </template>
  <script setup>
  import { useSlots, h } from 'vue'
  const slots = useSlots()
  // 从默认插槽获取原始VNode列表
  const rawSlotNodes = slots.default?.() || []
  // 遍历序列，匹配需要索引的组件，注入自动计算的index
  const processedSlotNodes = rawSlotNodes.map((vnode, nodeIndex) => {
    // 过滤注释、纯文本等非组件节点，匹配需要索引的组件类型
    const isTargetComp = vnode.type?.__name === 'CompB' || vnode.type?.name === 'CompC'
    if (isTargetComp) {
      // 克隆原VNode，合并原有props，注入自动计算的index，不修改原始VNode结构
      return h(vnode.type, {
        ...vnode.props,
        index: nodeIndex,
        slots: vnode.children
      })
    }
    return vnode
  })
  </script>
  

  这种方案下，开发者编写的模板可以简化为：

  <CompA>
    <CompB />
    <CompB />
    <CompC />
  </CompA>
  

  子组件内部照常声明index prop接收值即可，和手动传入的行为完全一致。
• 方案二：provide/inject 实现无侵入索引注册
  如果不想在容器组件中硬编码匹配具体子组件类型，可以让容器组件和子组件通过依赖注入建立通信，子组件挂载时主动向容器注册，依次获取自身在序列中的位置，完全不需要容器预先感知插槽里的组件类型。
  容器组件（以TabContainer为例）的核心逻辑：

  import { provide, reactive } from 'vue'
  // 内部维护已注册的子组件映射表，key为子组件的唯一uid，value为分配的索引
  const childRegisterMap = reactive(new Map())
  // 子组件注册方法
  const registerChild = (childUid) => {
    childRegisterMap.set(childUid, childRegisterMap.size)
    return childRegisterMap.get(childUid)
  }
  // 子组件卸载时的注销方法
  const unregisterChild = (childUid) => {
    childRegisterMap.delete(childUid)
    // 注销后重新为剩余子组件分配索引，避免中间节点卸载导致的索引错乱
    let currentIndex = 0
    const updatedMap = new Map()
    childRegisterMap.forEach((_, uid) => {
      updatedMap.set(uid, currentIndex++)
    })
    childRegisterMap.clear()
    updatedMap.forEach((idx, uid) => childRegisterMap.set(uid, idx))
  }
  // 向所有后代子组件暴露注册/注销方法
  provide('tabContainerContext', { registerChild, unregisterChild })
  

  子组件（以TabButton、TabPanel为例）的核心逻辑：

  import { inject, ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
  const instance = getCurrentInstance()
  const containerContext = inject('tabContainerContext', null)
  // 内部存储自动获取的索引
  const autoIndex = ref(-1)
  onMounted(() => {
    // 组件挂载时主动注册，获取容器分配的索引
    autoIndex.value = containerContext.registerChild(instance.uid)
  })
  onUnmounted(() => {
    // 组件卸载时主动注销，释放索引位
    containerContext.unregisterChild(instance.uid)
  })
  

  这种方案的灵活性更高，插槽内的组件顺序、数量动态变化时，每个子组件拿到的索引始终和实际渲染的兄弟序列位置保持一致，不需要容器组件做任何额外适配。
• computed选项的适配方式
  拿到自动获取的索引后，原有的ARIA属性拼接逻辑可以完全迁移到computed选项中实现，减少模板内的冗余表达式：

  // TabPanel组件内部的computed逻辑
  const panelDomId = computed(() => `${tabsWidgetUnique}-panel-${autoIndex.value}`)
  const relatedAriaLabelledby = computed(() => `${tabsWidgetUnique}-button-${autoIndex.value}`)
  

  模板中直接绑定computed返回的响应式值即可，和原有手动传index的逻辑运行效果完全一致。

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