点击上/下一步按钮切换进度条状态的实现方案咨询

不需要调整现有架构，步骤切换的逻辑完全可以在App.vue中实现，甚至这是更合理的选择——因为App.vue作为步骤内容、按钮、进度条的父容器，天然适合统一管理全局的步骤状态。

具体实现步骤 #

1. 在App.vue中维护步骤状态
   声明响应式变量currentStep记录当前步骤，定义总步骤数totalSteps，再编写上一步/下一步的点击逻辑并做边界值判断：

   <script setup>
   import { ref } from 'vue';
   import ProgressBar from './components/ProgressBar.vue';
   
   const currentStep = ref(1);
   const totalSteps = 2;
   
   const goNext = () => {
     if (currentStep.value < totalSteps) {
       currentStep.value++;
     }
   };
   
   const goPrev = () => {
     if (currentStep.value > 1) {
       currentStep.value--;
     }
   };
   </script>
   

2. 模板中绑定状态与事件
   将currentStep传递给进度条组件，给按钮绑定点击事件并根据当前步骤控制禁用状态：

   <template>
     <!-- 步骤内容区 -->
     <div class="step-content">
       <div v-if="currentStep === 1">第一步内容</div>
       <div v-else>第二步内容</div>
     </div>
   
     <!-- 操作按钮区 -->
     <div class="btn-group">
       <button @click="goPrev" :disabled="currentStep === 1">上一步</button>
       <button @click="goNext" :disabled="currentStep === totalSteps">下一步</button>
     </div>
   
     <!-- 进度条组件 -->
     <ProgressBar :current-step="currentStep" :total-steps="totalSteps" />
   </template>
   

3. 进度条组件根据状态渲染
   进度条组件通过props接收状态，循环渲染圆圈并通过动态类名控制激活状态（绿色）：

   <template>
     <div class="progress-container">
       <div 
         v-for="step in totalSteps" 
         :key="step"
         class="progress-circle"
         :class="{ active: step <= currentStep }"
       >
         {{ step }}
       </div>
       <!-- 可选：步骤间连接线 -->
       <div 
         v-for="i in totalSteps - 1" 
         :key="`line-${i}`"
         class="progress-line"
         :class="{ active: i < currentStep }"
       ></div>
     </div>
   </template>
   
   <script setup>
   defineProps({
     currentStep: {
       type: Number,
       required: true
     },
     totalSteps: {
       type: Number,
       required: true
     }
   });
   </script>
   
   <style scoped>
   .progress-container {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 20px;
   }
   
   .progress-circle {
     width: 32px;
     height: 32px;
     border: 2px solid #ddd;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
   }
   
   .progress-circle.active {
     border-color: #2ecc71;
     background-color: rgba(46, 204, 113, 0.1);
     color: #2ecc71;
   }
   
   .progress-line {
     width: 40px;
     height: 2px;
     background-color: #ddd;
     margin: 0 8px;
     transition: all 0.3s ease;
   }
   
   .progress-line.active {
     background-color: #2ecc71;
   }
   </style>
   

为什么不需要调整架构？ #

这种父组件管理状态、子组件接收状态渲染的模式，完全符合Vue的单向数据流原则，逻辑清晰且各组件职责明确：

• App.vue负责状态管理与业务逻辑
• 进度条组件只负责根据传入状态渲染UI
• 步骤内容组件只负责展示对应步骤的内容

这样的结构不仅易于维护，还能方便扩展更多步骤，无需重构核心架构。

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