vue.js中父子组件通信推荐用$emit实现多步确认框，父组件用单一step状态机管理流程，子组件只emit语义化事件且不调用业务逻辑，配合v-model同步visible，兼顾低耦合与健壮性。
Vue.js 中通过 $emit 实现父子组件通信，是处理多步确认框（如“删除前二次确认 → 输入密码 → 最终执行”）最清晰、低耦合的方式。核心思路是：父组件控制弹窗显隐与流程状态，子组件（弹窗）只负责触发事件，不维护业务逻辑。
弹窗组件只 emit 事件，不调用业务方法
子组件（如 ConfirmDialog.vue）应避免直接调用 api.delete() 或修改父组件数据。它只在用户操作后发出语义化事件：
-
@confirm-step="handleStep1"—— 点击“继续删除”时 emit 'confirm-step' -
@input-password="password => $emit('input-password', password)"—— 密码输入完成时透传值 -
@final-confirm="() => $emit('final-confirm')"—— 点击“确定执行”时通知父组件 -
@cancel="() => $emit('update:visible', false)"—— 统一关闭弹窗（支持 .sync 或 v-model）
父组件用状态机管理多步流程
不要用多个布尔值（showStep1, showStep2...）硬编码步骤。推荐用单一 step 字符串或数字状态，配合计算属性控制内容：
- 定义
step: 'init' | 'password' | 'review' | 'loading' | 'success' - 点击“删除”按钮 →
step = 'init'+dialogVisible = true - 子组件 emit
confirm-step→ 父组件设step = 'password' - 子组件 emit
input-password→ 存入form.password，但不立即提交 - 子组件 emit
final-confirm→ 触发 API 请求，进入loading状态
用 v-model 或 .sync 同步 visible，保持接口简洁
子组件声明 props: { visible: Boolean }，并 emit update:visible；父组件写成：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章