Vue 3 中步骤条组件支持 v-model 需声明 modelValue prop、定义 update:modelValue 事件，并在点击时触发该事件；父组件通过 v-model="activeStep" 实现双向同步，还可自定义为 v-model:step 提升语义性。
Vue 3 中 v-model 可以直接绑定步骤条（Step Bar）组件的当前步骤，关键在于把“当前步骤”视为一个可双向同步的状态值（如数字或字符串），并按 v-model 的标准协议实现：接收 modelValue prop、触发 update:modelValue 事件。
步骤条组件如何支持 v-model
假设你封装了一个 StepBar.vue，它用数字表示当前激活的步骤索引（从 0 开始），例如显示第 2 步时 currentStep = 1。要让它支持 v-model，需满足以下三点：
- 子组件声明
modelValueprop，类型为Number（或String，根据业务定） - 子组件通过
defineEmits(['update:modelValue'])声明更新事件 - 当用户点击某一步骤时，调用
emit('update:modelValue', newIndex)
子组件示例（StepBar.vue）
代码结构简洁实用：
<template>
<div class="step-bar">
<div
v-for="(step, index) in steps"
:key="index"
class="step"
:class="{ active: index === modelValue }"
@click="goToStep(index)"
>
{{ step }}
</div>
</div>
</template>
<script setup>
const props = defineProps({
modelValue: { type: Number, default: 0 },
steps: { type: Array, default: () => ['第一步', '第二步', '第三步'] }
})
const emit = defineEmits(['update:modelValue'])
const goToStep = (index) => {
emit('update:modelValue', index)
}
</script>
父组件中使用 v-model
父组件只需一行绑定，无需额外监听或处理：
立即学习“前端免费学习笔记（深入）”；
<template>
<StepBar v-model="activeStep" :steps="['注册', '验证', '完成']" />
<p>当前步骤：{{ activeStep }}（索引，从 0 开始）</p>
</template>
<script setup>
import { ref } from 'vue'
import StepBar from './StepBar.vue'
const activeStep = ref(0)
</script>
此时点击步骤项，activeStep 会自动更新；反过来，若在父组件中修改 activeStep.value = 2，步骤条也会高亮第三步——真正双向同步。
进阶：支持自定义 v-model 名称（如 v-model:step）
如果希望语义更明确（比如避免和其它状态冲突），可用带参数的写法：
- 子组件接收
stepprop，触发update:step事件 - 父组件写成
<StepBar v-model:step="activeStep" /> - 此时子组件 props 写
step: { type: Number }，emits 写['update:step']
这种写法不影响逻辑，只提升可读性与复用性，尤其适合含多个状态的复杂步骤条（如同时控制步骤、是否禁用、错误状态等）。
