Vue 基础如何在表单提交时结合 loading 状态防止用户重复点击发送请求

最直接有效的方式是点击时立即禁用按钮并设 isSubmitting 为 true，再触发 submit 事件；父组件在处理时第一时间置 loading 为 true，且必须在 finally 中重置；全链路统一用 submitting 状态控制按钮、加载态和表单区域。

最直接有效的方式是：点击按钮时立刻禁用它，并同步设置 loading 状态；请求结束后再恢复。关键不是“等响应回来再禁用”，而是“先锁住，再发请求”。

按钮禁用 + loading 同步控制

子组件内用一个响应式变量（如 isSubmitting）同时控制按钮的 :disabled 和文字提示，不要依赖父组件传来的 loading 去判断是否可点——因为状态传递有延迟，容易漏掉一次点击。

1. 模板中写：<el-button :disabled="isSubmitting">{{ isSubmitting ? '提交中...' : '提交' }}</el-button>
2. 点击逻辑里立即设为 true：isSubmitting.value = true，然后马上 $emit('submit', data)
3. 不等待父组件返回，也不做任何条件判断，确保每次点击都只触发一次 emit

父组件响应 emit 时真实反映处理状态

父组件监听到 submit 事件后，loading 必须在回调函数第一行就赋值为 true，且必须在异步操作完成（无论成功或失败）后才重置为 false。

1. 推荐用 .finally() 或 try/catch/finally 结构，避免遗漏重置
2. 示例：async handleFormSubmit(data) { this.loading = true; try { await api.save(data); } finally { this.loading = false; } }
3. 不要在请求发起前加延时、不要靠防抖过滤点击——表单提交需要确定性响应，不是高频输入场景

统一用一个 submitting 管理整条链路

避免分散定义多个 loading 变量。比如表单页只有一个提交动作，就只用一个 submitting 控制按钮、loading 图标、甚至整个表单区域的 v-loading。

1. Element Plus 中可直接绑定：<el-form v-loading="submitting">
2. 按钮文案、禁用态、接口调用、错误提示全部围绕这一个状态联动
3. 这样既减少状态冗余，也防止父子组件之间因命名或更新时机不同步导致的重复点击漏洞

进阶建议：封装成组合式函数或指令

如果项目中多处用到类似逻辑，可以抽成 useSubmitting Hook 或 v-click-once 指令，自动处理禁用、loading、Promise 完成后恢复等细节。

1. Hook 示例：调用 const { loading, execute } = useSubmitting(api.submit)，按钮直接绑 @click="execute(formData)"
2. 指令示例：<el-button v-click-once="handleSubmit">，内部已集成节流、禁用、Loading 图标和 Promise 自动恢复
3. 这类封装不是炫技，而是把“每次都要写的五步操作”压缩成一步，降低出错概率