子组件仅通过 emit('next') 或 emit('prev') 通知动作，不控制流程；父组件统一管理 step 状态、边界逻辑、校验及数据聚合，实现解耦与可维护性。
多步骤表单向导中用 emit 实现上一步/下一步切换，关键在于**子组件不控制流程，只通知动作；父组件统一管理 step 状态与边界逻辑**。子组件点击“下一步”或“上一步”时，只 emit 语义化事件（如 next 或 prev），由父组件决定是否允许跳转、更新当前步骤、校验前置条件等。
子组件：只 emit，不决策
每一步的子组件（如 Step1.vue、Step2.vue）只负责渲染本步内容和按钮，不维护 step 值，也不判断能否跳转：
- 按钮绑定
@click="$emit('next')"或@click="$emit('prev')" - 不调用
this.$parent.step++或类似操作，避免耦合 - 若需携带数据（如当前填写的邮箱），可 emit 带参事件：
$emit('next', { email }) - 禁用按钮逻辑放在子组件内部（例如校验未通过时禁用“下一步”），但禁用状态不通过 emit 通知——这是 UI 表现，不是流程指令
父组件：用单一 step 管理流程与边界
父组件维护一个响应式 step（如数字 1/2/3，或字符串 'basic'/'contact'/'review'），并集中处理所有跳转逻辑：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 监听子组件事件：
@next="handleNext"、@prev="handlePrev" -
handleNext()中先校验当前步数据（可调用子组件暴露的validate()方法，或读取已收集的字段状态），校验失败则不更新 step -
handlePrev()通常无条件执行：step = Math.max(1, step - 1)，但也可加逻辑（如清空后续步骤缓存） - 用
v-if或component :is动态渲染当前 step 对应的子组件，保持 DOM 干净
配合 v-model 同步表单数据更简洁
整个向导的数据建议统一由父组件管理（如 formData reactive 对象），子组件通过 v-model（即 modelValue + update:modelValue）同步各自字段：
立即学习“前端免费学习笔记（深入）”；
- 子组件声明
props: { modelValue: Object }，输入时$emit('update:modelValue', newValue) - 父组件写成：
<Step1 v-model="formData.basic" @next="handleNext" /> - 这样每步数据自动聚合，提交时直接用
formData，无需遍历 ref 或手动取值
错误处理与用户体验细节
真实场景中，跳转不是简单 ±1，需考虑异步校验、用户中断、重复点击等：
- 正在提交或校验中时，禁用所有导航按钮（父组件用
isSubmitting控制） - 从第 3 步返回第 2 步后，若第 2 步数据被第 3 步修改过（如自动填充地址），应在
handlePrev中重置或保留，按业务定 - 用户连续点击“下一步”，用
setTimeout防抖或按钮 loading 状态拦截，避免多次触发校验 - 最后一步点击“提交”时，建议 emit
submit而非next，语义更清晰，也方便父组件区分流程终点
