本文详解如何通过 `inheritattrs: false` 和 `v-bind=”$attrs”` 将父组件传递的事件（如 `@click`）、指令（如 `:disabled`）和动态 class 正确透传至子组件内部 `` 元素，彻底规避 html 无效嵌套问题。

在 Vue 开发中，将按钮抽象为可复用组件是常见需求，但若处理不当，极易陷入「非法嵌套按钮」的陷阱——即在父组件 slot 中再次写 来绑定 @click，导致 HTML 结构违反规范（ 内不可嵌套 ）。根本原因在于：Vue 默认会将未声明的 prop 和事件自动挂载到组件根元素上；而你的按钮组件根节点是

，@click 等原生属性无法生效，最终被迫“曲线救国”，造成语义错误。

✅ 正确解法分三步：

1. 禁用默认属性继承：在组件选项中设置 inheritAttrs: false，阻止 Vue 自动将未声明的属性（如 @click, :disabled, :class）绑定到
   根节点；

2. 显式透传原生属性：使用 v-bind=”$attrs” 将所有未被 props 消费的属性（含事件、指令、class 等）精准绑定到内部

上；

以下是优化后的完整按钮组件（MyButton.vue）：

在父组件中调用时，即可像原生按钮一样直接使用：

立即学习“前端免费学习笔记（深入）”；

Napkin AI

Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。

下载

⚠️ 注意事项：

• v-bind=”$attrs” 必须写在 上，而非
  ；

  若需额外接收自定义 props（如 size、variant），应显式声明 props: [‘size’, ‘variant’]，它们将从 $attrs 中自动剔除，避免重复绑定；

  Vue 3

  动态 :class 和 :style 会随 $attrs 一并透传，无需额外处理，Vue 会自动合并。

  这种模式不仅解决了 HTML 合法性问题，更让组件具备完整的原生按钮语义与无障碍支持（如键盘 Enter/Space 触发），是构建高质量 UI 组件库的标准实践。