子组件应分阶段emit语义化事件（如loading-start、update:data、error），父组件监听并响应更新状态，实现松耦合异步通信；禁用按钮防并发，避免父组件干预子组件异步逻辑。
当子组件通过 emit 触发异步操作（如 API 调用），父组件需要及时响应并同步状态（如加载中、错误、新数据），关键不是“等 emit 完再更新”，而是建立可预测的响应流。核心思路是：子组件明确发出阶段事件，父组件监听并驱动自身状态，同时合理管理异步生命周期。
子组件主动分阶段 emit 状态信号
不要只在异步结束后 emit 一次结果。应按执行过程 emit 多个语义化事件，让父组件有据可依：
-
触发前：
this.$emit('update:loading', true)或自定义loading-start -
成功后：
this.$emit('update:data', newData)+this.$emit('update:loading', false) -
失败时：
this.$emit('error', err)或this.$emit('update:error', err)
Vue 3 Composition API 中可用 defineEmits 显式声明，提升可维护性；Vue 2 可配合 v-model 或 .sync（已废弃）的语义约定，但推荐统一用自定义事件名。
父组件用响应式变量承接，并绑定到 UI
父组件不自行调用 API，而是信任子组件 emit 的信号，用 ref 或 reactive 管理状态：
立即学习“前端免费学习笔记（深入）”；
- 定义
const loading = ref(false)、const data = ref(null)、const error = ref(null) - 在模板中直接使用：
v-if="loading">加载中...、v-else-if="error">{{ error.message }} - 监听子组件事件：
@update:loading="loading.value = $event"、@update:data="data.value = $event"、@error="handleError"
这样父子职责清晰：子管“做”和“报进度”，父管“显”和“做后续”（如跳转、弹窗）。
避免状态竞争：禁用按钮 + emit 前校验
用户快速连点可能造成多次并发请求，导致状态错乱。需在子组件内控制：
- 点击按钮时先
emit('update:loading', true)，再发起请求 - 按钮绑定
:disabled="loading"，视觉+交互双重锁定 - 请求开始前加简单校验（如必填字段），失败立即
emit('error')并emit('update:loading', false)
不依赖父组件去防抖或节流——那会把控制逻辑上移，违背“子组件自治”原则。
需要父组件干预时：emit 携带 Promise 或回调（谨慎使用）
极少数场景（如子组件需等父组件确认后再继续），可用回调方式，但要避免耦合过重：
- 子组件 emit：
this.$emit('before-submit', (shouldProceed) => { if (shouldProceed) doAsync() }) - 父组件监听后调用回调：
@before-submit="onBeforeSubmit"，并在内部决定是否执行 - 更推荐方案：用
v-model:confirmed控制确认态，或拆分为两个事件（confirm-request和confirm-accepted）
Promise 方式（如 emit('submit').then(...)）在 Vue 2 不原生支持，Vue 3 中虽可返回 Promise，但会破坏事件总线的解耦性，不建议作为常规通信手段。
不复杂但容易忽略的是：把异步当作黑盒交给子组件，同时用结构化事件暴露它的生命周期。父组件只需“听信号、改状态、做反应”，无需知道请求怎么发、URL 是什么、参数如何拼——这才是组件通信的松耦合本质。
