子组件通过 emit 向父组件同步 loading 状态，需在真实请求发起前 emit('loading-change', true)、完成后 emit('loading-change', false)，父组件用 reactive map 聚合多子组件状态并 computed 全局 isloading，再配合 error、ready 等语义化事件形成完整反馈闭环。
用 emit 实现子组件向父组件同步加载状态，核心是让子组件主动“说话”——在 loading 开始、变化或结束时，通过自定义事件把当前状态告诉父组件，而不是让父组件去猜或轮询。
明确 loading 状态的触发时机
子组件应在真实发生加载行为的位置 emit 事件，比如 API 请求发起前、响应返回后、或 DOM 渲染关键节点完成时。避免在 mounted 里盲目发 loading-start，因为此时可能还没开始请求。
- 请求发起时：调用 emit('loading-change', true)
- 请求完成（无论成功或失败）：调用 emit('loading-change', false)
- 若需区分阶段（如 loading → success → idle），可 emit 不同事件名，如 'loading-start'、'loading-end'、'load-success'
父组件统一收集并聚合多个子组件状态
当页面含多个子组件（如列表 + 筛选器 + 图表），父组件可用 reactive Map 或 ref 对象记录每个子组件的 loading 状态，再通过 computed 计算全局 loading 值。
- 为每个子组件分配唯一 id（如通过 prop 传入 componentId）
- 父组件监听 @loading-change="(loading) => loadingMap.set(id, loading)"
- 定义 const isLoading = computed(() => Array.from(loadingMap.values()).some(Boolean))
- 用 v-loading="isLoading" 或 v-if="!isLoading" 控制全局遮罩或按钮禁用
配合错误与就绪信号，形成完整反馈闭环
单纯同步 loading 不够，父组件还需知道“为什么 loading”和“是否真 ready”。建议搭配 emit 其他语义化事件：
- 子组件请求失败时 emit('error', error)，父组件统一展示 toast 或重试按钮
- 子组件数据渲染完毕、DOM 可交互后 emit('ready')，父组件才执行 focus、scrollIntoView 等操作
- 若需等待多个子组件都 ready，可用 Promise.all 包裹多个 onMounted + nextTick 后的 emit('ready')
类型安全与调试友好性
使用 defineEmits 声明事件签名，既防错也提升 IDE 提示体验：
- 子组件中：const emit = defineEmits(['loading-change', 'error', 'ready'])
- 传递参数时保持结构一致，例如 emit('loading-change', { status: true, source: 'api' })
- 开发阶段可在 emit 前加 console.log，上线前用环境变量控制是否移除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
