Vue自定义表单组件处理回车提交需阻止form默认提交、在可编辑元素上用@keyup.enter触发submit事件、统一触发逻辑至私有方法triggerSubmit()。
在 Vue 自定义表单组件中处理回车提交，关键不是“加个 @keyup.enter 就完事”，而是让自定义组件既保持封装性，又准确传递用户意图——尤其是要避开原生表单自动提交、输入法干扰、事件冒泡和焦点丢失等常见陷阱。
确保回车只触发预期逻辑，不触发原生 submit
自定义表单组件内部如果包裹了 标签，浏览器会按 W3C 标准对单文本框表单自动响应回车并提交（即使没写 submit 按钮）。这会导致 @keyup.enter 还没执行，页面就刷新或跳转了。
解决办法是：在 form 标签上显式阻止默认行为。
- 用
@submit.prevent—— 最简洁可靠，Vue 编译后会自动调用event.preventDefault() - 避免只靠
@keyup.enter而不处理 form 默认行为，否则中文输入法下可能先提交未确认词，再执行你的方法 - 如果组件不暴露 form 元素，可在组件根元素上监听
@submit.prevent并$emit('submit')向外透出
把回车事件绑定到正确的输入控件上
不要在自定义组件的根 div 上监听 @keyup.enter，那会捕获所有按键（包括非聚焦状态），也不符合语义。应该把事件委托给内部实际可编辑的元素：
- 对每个
或显式添加@keyup.enter="$emit('submit')"（子组件向父组件通信） - 若组件封装了 Element Plus 的
@keyup.enter.native="$emit('submit')"（Vue 2）或使用v-on:keyup.enter="..."（Vue 3 中 .native 已废弃，直接用即可） - 多个输入框都绑，保证任意一个获得焦点时按回车都能提交
兼容输入法与移动端软键盘
中文拼音、五笔、日文假名等输入法下，用户按 Enter 可能是“确认选词”而非“提交”。此时用 @keydown.enter 会拿到中间态（如“zhong”），而 @keyup.enter 才能确保 input.value 是最终内容。
- 一律使用
@keyup.enter，不用 keydown 或 keypress - 移动端 iOS/Android 软键盘的“完成”“搜索”“发送”按钮，多数也映射为 Enter 键，
@keyup.enter同样生效 - 如需区分“软键盘搜索键”和物理回车键，可检查
event.code === 'Enter'和event.key === 'Enter'，二者通常一致
统一回车与按钮点击的行为入口
自定义组件常提供“回车提交”和“点击提交按钮”两种方式。要保证它们走同一套校验、请求、反馈逻辑，不能一个调 handleSubmit，另一个直接发请求。
- 在组件内部定义一个私有方法（如
triggerSubmit()），集中处理验证、loading 状态、API 调用 -
@keyup.enter和@click都调这个方法，而不是分别写重复逻辑 - 对外只暴露
submit事件，父组件监听即可，无需关心触发来源 - 如需支持外部手动提交（比如父组件调用方法），可配合
defineExpose（Vue 3）或ref+methods（Vue 2）暴露提交函数
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
