Vue多步骤表单问题：多步骤同时显示，需处理响应式或组件通信

先修正代码里的明显失误 #

你的Step2.vue模板里，v-if="activePhase == 2"但标题写的是<h1>Step 1</h1>，这明显是复制代码时的疏漏，先把这个改过来，避免自己混淆视图对应关系。

核心问题：响应式失效+数据流错误 #

多步骤同时显示的本质是activePhase的响应式没生效，或者子组件无法正确触发状态更新：

• 直接注入基本类型的activePhase是无响应式的，Vue中Provide/Inject如果传递普通值，不会触发视图更新
• 子组件直接执行this.activePhase = step不符合单向数据流规则，就算是响应式对象，这种写法也不推荐

方案1：用emit实现（符合Vue常规数据流规范） #

这是多步骤表单的通用做法，父组件统一管理activePhase状态，子组件通过emit触发状态变更：

1. 父组件定义状态并传递给子组件：

<template>
  <Step1 :activePhase="activePhase" @go-to-step="activePhase = $event" />
  <Step2 :activePhase="activePhase" @go-to-step="activePhase = $event" />
</template>
<script>
export default {
  data() {
    return {
      activePhase: 1
    }
  }
}
</script>

2. 子组件（以Step2.vue为例）接收props并触发emit：

<template v-if="activePhase == 2">
  <!-- 表单内容 -->
  <button @click.prevent="$emit('go-to-step', 3)">Continue</button>
</template>
<script>
export default {
  props: ['activePhase']
}
</script>

方案2：用响应式Provide/Inject（适合深层组件嵌套场景） #

如果一定要用Provide/Inject，必须传递响应式对象，不能是基本类型：

1. 父组件提供响应式状态：

<script>
// Vue3写法，Vue2用Vue.observable
import { reactive, provide } from 'vue'
export default {
  setup() {
    const phaseState = reactive({
      activePhase: 1
    })
    provide('phaseState', phaseState)
    return { phaseState }
  }
}
</script>

2. 子组件注入并使用响应式对象：

<template v-if="phaseState.activePhase == 2">
  <!-- 表单内容 -->
  <button @click.prevent="phaseState.activePhase = 3">Continue</button>
</template>
<script>
import { inject } from 'vue'
export default {
  setup() {
    const phaseState = inject('phaseState')
    return { phaseState }
  }
}
</script>

注意：即便用这种方式，也建议在父组件提供专门的状态修改方法，子组件调用方法而非直接修改状态，保持数据流清晰。

最后排查步骤 #

1. 修正所有步骤组件里的标题、v-if判断对应关系
2. 确认activePhase的响应式实现正确（要么用props+emit，要么用响应式对象的Provide/Inject）
3. 检查所有步骤的显示条件是否与activePhase值严格匹配

内容的提问来源于stack exchange，提问作者user20984971