Vue+TypeScript按钮组组件开发：index值为null的问题求助

问题根源 #

1. Vue3插槽API变更：Vue3中$slots.default是返回VNode数组的函数，而非Vue2中的直接数组，直接遍历$slots.default会遍历函数的属性，导致index获取异常。
2. 模板结构错误：
   • <slot>标签内的内容是默认插槽的备用内容，当父组件传入插槽内容时，这部分代码不会执行，你的循环逻辑根本没生效。
   • 模板存在语法错误：开头没有<div>却有闭合的</div>。
3. 插槽内容处理逻辑错误：直接用CButton包裹原插槽的vnode会导致父组件的CustomButton被嵌套，不符合按钮组的预期逻辑。

修正后的组件代码 #

方案一：复用父组件传入的按钮组件（推荐） #

这个方案会保留父组件传入的CustomButton，仅为它们添加首尾类名：

<template>
  <div class="button-group">
    <!-- 调用$slots.default()获取实际VNode数组 -->
    <component 
      v-for="(vnode, index) in $slots.default?.() || []" 
      :key="index" 
      :is="vnode"
      :class="{
        'first-index': index === 0,
        'last-index': index === ($slots.default?.().length || 0) - 1
      }"
    />
  </div>
</template>

<script setup lang="ts">
// 无需额外逻辑，直接在模板中处理插槽
</script>

方案二：统一替换为CButton组件 #

如果你希望将父组件传入的内容统一用CButton包裹，需要调整插槽处理方式：

<template>
  <div class="button-group">
    <CButton
      v-for="(vnode, index) in slotNodes"
      :key="index"
      :class="{
        'first-index': index === 0,
        'last-index': index === slotNodes.length - 1
      }"
    >
      <!-- 渲染原插槽节点的内容 -->
      <component :is="vnode" />
    </CButton>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import CButton from './CButton.vue' // 确保导入CButton组件

// 获取处理后的插槽节点数组
const slotNodes = computed(() => $slots.default?.() || [])
</script>

关键说明 #

• 必须调用$slots.default()来获取实际的插槽VNode数组，这是Vue3插槽API的核心变化。
• 使用<component :is="vnode">可以正确复用或渲染原插槽的节点，避免DOM结构异常。
• 移除原模板中错误的<slot>包裹和多余的</div>标签，保证模板语法合法。

内容的提问来源于stack exchange，提问作者World's famous people