步骤条中子组件通过 emit 触发 step-change 事件向父组件传递目标步骤，父组件监听后校验并更新 currentStep，实现子传父通信；支持 v-model 双向绑定，兼顾受控与非受控模式。
步骤条向导中，子组件（如 StepBar）需要把用户点击的“目标步骤”主动告诉父组件，由父组件统一控制当前激活步骤。这正好是 子传父通信 的典型场景，核心就是用 emit 触发事件并传递目标索引或标识。
明确父子职责分工
父组件负责维护当前步骤状态（如 currentStep），并决定是否允许跳转；子组件只负责响应点击、校验权限（可选）、然后把目标步骤“喊出来”。不直接修改父组件数据，符合 Vue 单向数据流原则。
子组件：定义并触发跳转事件
在步骤条子组件（比如 StepBar.vue）中：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
defineEmits声明一个自定义事件，例如step-change，表示“用户想切换步骤” - 给每个步骤项绑定点击事件，点击时调用
emit('step-change', targetIndex)，把目标步骤序号（如 2）或唯一 ID（如 'confirm'）传出去 - 可加简单判断：比如只允许向前跳，或跳转前检查上一步是否完成
父组件：监听并响应跳转请求
在使用步骤条的父组件中：
立即学习“前端免费学习笔记（深入）”；
- 模板里用
@step-change="handleStepChange"监听子组件发出的事件 - 在
handleStepChange方法里接收参数（即目标步骤），做业务逻辑判断（如验证表单、权限、异步加载） - 确认可跳转后，更新自身
currentStep数据，驱动整个流程前进或回退
补充细节：支持受控与非受控模式
如果步骤条要更灵活，可以结合 props 接收 modelValue（Vue 3 推荐写法），让父组件既能响应式控制，也能响应子组件的跳转请求：
- 子组件 emit 后，父组件更新
v-model:step绑定的值 - 父组件也可通过 props 主动变更当前步骤，子组件用
watch或onUpdated同步 UI - 这样既支持用户点击跳转，也支持程序逻辑驱动（如提交成功后自动进下一步）
