vue 3 中 v-model 配合开关组件的核心是组件需接收 modelvalue prop 并触发 update:modelvalue 事件；支持字符串、数字等多状态类型，可自定义 prop 名如 v-model:status。

Vue 3 中 v-model 配合开关组件切换状态，核心是让组件支持 modelValue prop 和 update:modelValue 事件。它不是“自动识别开关逻辑”，而是你主动定义：什么值代表什么状态、点击时发什么新值过去。

开关组件必须接收 modelValue 并触发更新

子组件需明确声明接收 modelValue（Vue 3 默认约定），并在用户交互时通过 emit('update:modelValue', newValue) 通知父组件。例如一个三态开关：

• 接收 props.modelValue —— 可能是 'pending'、'done' 或 'all'
• 点击切换时，计算下一个状态（如 pending → done → all → pending）
• 调用 emit('update:modelValue', nextValue)

父组件用 v-model 绑定，无需手动写事件

父组件直接使用 <tristateswitch v-model="filterStatus"></tristateswitch> 即可。这行代码等价于：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• :modelValue="filterStatus" —— 把当前状态传进去
• @update:modelValue="filterStatus = $event" —— 收到新状态就更新本地变量

不需要额外写 @change 或 @input，v-model 自动完成绑定闭环。

支持多状态时，modelValue 类型要匹配

v-model 不限定只能是布尔值。三态开关的 modelValue 可以是字符串、数字甚至对象：

• 字符串：modelValue: { type: String, values: ['pending', 'done', 'all'] }
• 数字：modelValue: { type: Number, default: 0 }（0=关，1=中，2=开）
• 注意：prop 类型声明要和实际传入值一致，否则 Vue 会警告

想自定义 v-model 的 prop 名？用参数语法

如果不想用默认的 modelValue，比如想叫 status，可在父组件这样写：

• <tristateswitch v-model:status="filterStatus"></tristateswitch>
• 对应子组件里仍接收 props.status，并 emit 'update:status'
• 此时不依赖全局 model 选项，更清晰、更推荐用于非布尔场景

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！