Vue.js中如何避免按钮嵌套导致的无效HTML问题

核心问题 #

HTML规范明确禁止<button>标签嵌套另一个<button>，你当前的实现会生成无效DOM结构，必须调整组件设计来规避这个问题。

优化方案1：把交互逻辑封装到组件内部 #

将点击事件、禁用状态、动态样式通过props传入组件，让内部的按钮直接承载这些属性，插槽只负责传递按钮的内容（文本/图标）。

改造后的可复用按钮组件 #

<template>
  <div class="w-[70%] mx-[15%] flex items-center justify-center">
    <button
      class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500"
      @click="$emit('click')"
      :disabled="disabled"
      :class="{ 'text-gray-300 border-gray-300': disabled }"
    >
      <slot></slot>
    </button>
  </div>
</template>

<script setup>
defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
defineEmits(['click'])
</script>

父组件使用方式 #

直接绑定点击事件、传递禁用状态，插槽里只放按钮文本即可：

<template>
  <CheckAnswerButton 
    @click="checkAnswer"
    :disabled="isAnswerChecked"
  >
    Check answer
  </CheckAnswerButton>
</template>

优化方案2：改成纯布局容器组件 #

如果需要更灵活的按钮内容（比如图标+文本组合），可以把组件简化为仅提供布局样式的容器，让父组件传入完整的按钮元素：

容器组件代码 #

<template>
  <div class="w-[70%] mx-[15%] flex items-center justify-center">
    <slot></slot>
  </div>
</template>

父组件使用方式 #

<template>
  <ButtonContainer>
    <button
      @click="checkAnswer"
      :disabled="isAnswerChecked"
      class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500"
      :class="{ 'text-gray-300 border-gray-300': isAnswerChecked }"
    >
      Check answer
    </button>
  </ButtonContainer>
</template>

这种方式既保留了布局的复用性，又完全避免了按钮嵌套的问题，同时父组件可以自由控制按钮的交互与样式细节。

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