Vue.js如何实现表单输入框回车提交 无需逐输入框绑定事件

• 最推荐方案：复用原生<form>的原生提交特性
  只要将所有需要响应回车提交的输入框，放在同一个<form>标签内，配合Vue的.prevent事件修饰符拦截默认页面刷新行为，就可以自动实现「任意输入框按回车触发提交」的效果，完全不需要逐输入框绑定键盘事件。这套逻辑和Angular框架中ngSubmit的工作机制完全一致，迁移成本几乎为零。

  对比冗余的传统逐绑写法：

  <!-- 冗余写法：每个输入框单独绑回车事件，后期新增输入框还要重复绑 -->
  <input v-model="form.account" @keydown.enter.prevent="loginUser" />
  <input v-model="form.password" type="password" @keydown.enter.prevent="loginUser" />
  <button @click="loginUser">提交</button>
  

  优化后的零逐绑写法：

  <!-- 零逐输入框绑定的标准实现 -->
  <form @submit.prevent="loginUser">
    <input v-model="form.account" />
    <input v-model="form.password" type="password" />
    <button type="submit">提交</button>
  </form>
  

  核心逻辑是，HTML原生规范本身就规定：表单内的可输入元素触发回车操作时，会自动冒泡触发表单的submit事件。Vue的.prevent修饰符仅用来屏蔽提交后页面刷新的默认行为，不会破坏这套原生交互逻辑。

• 兜底通用方案：外层容器事件委托
  如果场景受限制，无法使用原生<form>标签包裹输入区域（比如非标准的弹窗结构、分栏布局的表单），可以利用事件冒泡的委托能力，只在外层容器绑定一次回车监听，自动覆盖内部所有输入元素：

  <div 
    class="form-container"
    @keydown.enter="handleContainerEnter"
  >
    <input v-model="form.account" />
    <input v-model="form.password" type="password" />
    <button @click="loginUser">提交</button>
  </div>
  
  <script setup>
  const handleContainerEnter = (e) => {
    // 过滤非输入元素触发的回车事件，避免按钮等元素误触发提交
    const triggerTag = e.target.tagName
    if (['INPUT', 'TEXTAREA'].includes(triggerTag)) {
      loginUser()
    }
  }
  </script>
  

  这种写法仅需在外层绑定一次监听，后续内部新增、删除输入框时都不需要额外调整绑定逻辑，彻底解决逐元素绑事件的冗余问题。

补充说明：你提到的「将相关方案补充到官方文档」的建议很有实际价值——目前Vue官方文档的事件处理、表单交互章节已经覆盖了@submit.prevent的核心用法，但不少从Angular迁移到Vue的开发者，初期容易延续逐元素绑定指令的开发惯性，往往会忽略原生表单自带的交互能力带来的代码简化空间。

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