子组件仅通过 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"></step1>
• 这样每步数据自动聚合，提交时直接用 formData，无需遍历 ref 或手动取值

错误处理与用户体验细节

真实场景中，跳转不是简单 ±1，需考虑异步校验、用户中断、重复点击等：

• 正在提交或校验中时，禁用所有导航按钮（父组件用 isSubmitting 控制）
• 从第 3 步返回第 2 步后，若第 2 步数据被第 3 步修改过（如自动填充地址），应在 handlePrev 中重置或保留，按业务定
• 用户连续点击“下一步”，用 setTimeout 防抖或按钮 loading 状态拦截，避免多次触发校验
• 最后一步点击“提交”时，建议 emit submit 而非 next，语义更清晰，也方便父组件区分流程终点

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！