如何在 Vue 中正确封装可复用按钮组件（避免非法嵌套与属性丢失）

✅ 推荐实现（Vue 3 Composition API + SFC）

? 父组件调用方式（简洁、语义清晰、符合标准）

⚠️ 注意事项与最佳实践

• 不要使用命名插槽（如 #checkAnswer）：本场景只需默认插槽即可，命名插槽会增加冗余且无实际收益；
• 避免手动绑定事件到 slot 内容：slot 是内容分发机制，不是事件代理容器；事件应由宿主 原生触发；
• 样式类透传需谨慎：:class 会与组件内建 class 合并（Vue 自动合并），但建议将动态样式逻辑尽量收敛到组件内部，或通过 :class 绑定统一控制；
• 可访问性增强：如需支持键盘操作（Enter/Space 触发），原生 已默认支持，无需额外处理；
• typescript 用户：若使用 TS，可通过 defineEmits 显式声明事件类型，提升类型安全。

✅ 最终效果

• 生成合法 HTML：单层 ，无嵌套；
• 支持所有原生 button 特性：@click、@keydown、:disabled、:aria-*、:class、:style 等；
• 组件复用灵活：同一 MyButton 可用于“提交”、“重置”、“检查答案”等多种语义场景；
• 符合 Vue 官方推荐模式：Attribute Fallthrough。

通过这一模式，你不仅修复了 HTML 合法性问题，更构建了一个真正“类原生”的可复用按钮组件——它既是 Vue 组件，又完全扮演原生 的角色。

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