本文介绍在 vue3 多步骤表单场景下，如何通过组合式 api 为每一步（如性别、活动水平）动态渲染选项，并将用户选择分别绑定到不同响应式变量（如 `usergender`、`useractivitylevel`），同时精准控制流程跳转。
在 Vue3 构建多步骤交互面板（如引导式问卷或配置向导）时，常见需求是：每一步展示不同的选项列表，用户点击后不仅推进流程，还需将所选值按步骤语义化地存入对应变量。例如第一步选“Male”，存入 userGender；第二步选“Active Lifestyle”，存入 userActivityLevel。这要求组件既能解耦步骤逻辑，又能精准传递上下文数据。
✅ 推荐实现方案：统一事件 + 结构化解析
核心思路是 避免为每个步骤单独监听多个事件，而是通过一个结构化事件（如 { step: 0, value: 'Male', key: 'gender' }）承载完整上下文，由父组件统一处理赋值与流程控制。
1. 父组件：定义步骤配置与响应式状态
<script setup>
import { ref, reactive } from 'vue'
import BaseLevel from './BaseLevel.vue'
const activeLevel = ref(0)
const formData = reactive({
userGender: '',
userActivityLevel: ''
})
// 步骤配置：显式声明每步的 key（用于绑定变量）和选项
const levels = [
{
heading: 'Choose a gender',
key: 'userGender', // 关键！映射到 formData 的字段名
text: ['Male', 'Female', 'Other']
},
{
heading: 'What is your activity level?',
key: 'userActivityLevel',
text: ['Sedentary', 'Low to Moderate Activity', 'Active Lifestyle', 'Extreme Active']
}
]
// 统一处理回调：接收结构化数据，自动赋值 + 推进
const handleStepComplete = ({ key, value }) => {
if (key in formData) {
formData[key] = value
}
if (activeLevel.value < levels.length - 1) {
activeLevel.value++
}
}
</script>
<template>
<component
:is="BaseLevel"
:list="levels"
:active-level="activeLevel"
@step-complete="handleStepComplete"
/>
</template>2. 子组件（BaseLevel.vue）：发射带上下文的事件
<script setup>
const props = defineProps({
list: { type: Array, required: true },
activeLevel: { type: Number, default: 0 }
})
const emit = defineEmits(['step-complete'])
const handleItemClick = (item) => {
// 发射包含当前步骤 key 和所选值的对象
emit('step-complete', {
key: props.list[props.activeLevel].key,
value: item
})
}
</script>
<template>
<div class="level-panel">
<h3>{{ list[activeLevel].heading }}</h3>
<ul>
<li
v-for="item in list[activeLevel].text"
:key="item"
@click="handleItemClick(item)"
class="option-item"
>
{{ item }}
</li>
</ul>
</div>
</template>⚠️ 注意事项与最佳实践
- 不要依赖索引隐式映射变量：避免用 activeLevel.value === 0 ? 'userGender' : 'userActivityLevel' 这类硬编码逻辑，易出错且难以维护。显式在 levels 配置中声明 key 字段，实现数据驱动。
- 防越界保护：在 handleStepComplete 中检查 activeLevel.value < levels.length - 1，防止最后一步点击后 activeLevel 超出数组范围。
- 扩展性考虑：若后续需支持输入框、单选组等复杂控件，可将 text 替换为 options: [{ label: 'Male', value: 'male' }]，保持结构一致。
- 类型安全（TypeScript 可选）：为 levels 定义接口，确保 key 值严格匹配 formData 的属性名，编译期即可捕获拼写错误。
此方案清晰分离了步骤配置、状态管理与交互逻辑，既满足“每步不同数据、独立存储”的需求，又具备良好的可读性与可维护性，是 Vue3 多步骤表单的推荐实践。
