Vue 3 中 v-model 怎么绑定步骤条组件的当前步骤-Vue.js-PHP中文网

vue 3 中步骤条组件支持 v-model 需声明 modelvalue prop、定义 update:modelvalue 事件，并在点击时触发该事件；父组件通过 v-model="activestep" 实现双向同步，还可自定义为 v-model:step 提升语义性。

vue 3 中 v-model 怎么绑定步骤条组件的当前步骤

Vue 3 中 v-model 可以直接绑定步骤条（Step Bar）组件的当前步骤，关键在于把“当前步骤”视为一个可双向同步的状态值（如数字或字符串），并按 v-model 的标准协议实现：接收 modelValue prop、触发 update:modelValue 事件。

步骤条组件如何支持 v-model

假设你封装了一个 StepBar.vue，它用数字表示当前激活的步骤索引（从 0 开始），例如显示第 2 步时 currentStep = 1。要让它支持 v-model，需满足以下三点：

子组件声明 modelValue prop，类型为 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 }">
      {{ 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

父组件只需一行绑定，无需额外监听或处理：

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

<template><stepbar v-model="activeStep" :steps="['注册', '验证', '完成']"></stepbar><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，步骤条也会高亮第三步——真正双向同步。