Vue 3 中 v-model 通过 modelValue prop 和 update:modelValue 事件实现标签页索引或 name 的双向绑定，支持数字索引与字符串 name 两种方式，可编程式修改变量触发切换，需确保初始值匹配且组件已渲染。
Vue 3 中 v-model 处理标签页切换的索引绑定，核心是利用 modelValue prop 和 update:modelValue 事件实现双向同步。它不再像 Vue 2 那样默认用 value + input，而是语义化地绑定到 modelValue，更清晰也更灵活。
v-model 绑定索引值（最常用方式）
直接传入一个数字，代表当前激活项的下标：
<van-tabbar v-model="activeIndex"> <van-tabbar-item icon="home-o">首页</van-tabbar-item> <van-tabbar-item icon="search">搜索</van-tabbar-item> <van-tabbar-item icon="friends-o">朋友</van-tabbar-item> </van-tabbar>
import { ref } from 'vue'
export default {
setup() {
const activeIndex = ref(0) // 初始选中第 0 个
return { activeIndex }
}
}此时 activeIndex 改变会自动更新 Tabbar 显示，点击 Tabbar 也会反向更新 activeIndex —— 这就是 v-model 的双向性。
用 name 字符串代替索引（推荐用于可维护性）
当 Tabbar 项增多或顺序可能调整时，用 name 更稳定：
立即学习“前端免费学习笔记（深入）”；
<van-tabbar v-model="activeName"> <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item> <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item> <van-tabbar-item name="profile" icon="setting-o">我的</van-tabbar-item> </van-tabbar>
import { ref } from 'vue'
export default {
setup() {
const activeName = ref('home') // 初始选中 name 为 'home' 的项
return { activeName }
}
}组件内部会自动匹配 name 属性，无需关心顺序变化或增删项带来的索引偏移。
手动触发切换（编程式控制）
想在逻辑中跳转到某一页，只需修改响应式变量：
- 若用索引：
activeIndex.value = 2 - 若用 name：
activeName.value = 'profile'
Tabbar 会立即响应，无需额外调用方法或 emit 事件。
注意事项
-
<van-tabbar>必须有至少一个<van-tabbar-item>，否则v-model绑定无效； -
v-model的值必须与实际存在的索引或name匹配，否则默认回退到第一个项； - 如果 Tabbar 是条件渲染（比如
v-if），确保v-model变量已初始化，避免首次渲染时报错； - 自定义组件中若要支持
v-model，需声明modelValueprop 并$emit('update:modelValue', newValue)。
本质上，v-model 就是语法糖：v-model="xxx" 等价于 :modelValue="xxx" @update:modelValue="val => xxx = val"。
