Vue 3中复选框组通过v-model绑定数组实现多选，选中/取消自动增删值；单个复选框绑定布尔值；自定义组件需用modelValue prop和update:modelValue事件；注意共用同一响应式数组、避免对象值及正确初始化。
Vue 3 中，复选框组的多选绑定直接用 v-model 绑定到一个数组即可，选中项自动加入、取消则移除，无需手动操作数组。
多个复选框共用一个 v-model 数组
每个 <input type="checkbox"> 设置相同的 v-model 指向同一个响应式数组，并通过 value 属性指定该项代表的值：
- 用户勾选时，对应
value自动推入数组 - 取消勾选时，该值自动从数组中过滤掉
- 数组初始值建议设为空数组
[]，避免undefined导致报错
示例：
<input type="checkbox" value="苹果" v-model="fruits" /> 苹果<input type="checkbox" value="香蕉" v-model="fruits" /> 香蕉
<input type="checkbox" value="橙子" v-model="fruits" /> 橙子
<div>已选：{{ fruits }}</div>
脚本中定义：fruits: ref([]) 或 const fruits = ref([])（组合式 API）
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
单个复选框绑定布尔值
如果只有一个复选框，v-model 绑定的是布尔值，表示“是否选中”状态：
-
v-model="isChecked"→isChecked是ref(true)或ref(false) - 底层监听
change事件，自动同步checked属性与变量值
嵌套自定义复选框组件的 v-model 实现
在封装如 FormCheckbox 等组件时，需遵循 Vue 3 的 v-model 约定：
- 接收 prop 名必须为
modelValue（类型为Array<string>等） - 内部用
computed判断是否应被勾选：shouldBeChecked: () => props.modelValue.includes(props.inputValue) - 触发更新时派发
update:modelValue事件，传入新数组 - 避免直接修改
modelValue，也不要用value+input这套 Vue 2 写法
注意事项与常见问题
实际使用中容易踩坑的地方：
- 确保所有复选框的
v-model指向同一响应式引用，不要误写成不同变量 - 不要给数组元素赋值为对象（如
{id: 1, name: 'A'}），除非你自行处理深比较；默认用字符串或数字更稳妥 - 若需初始化“预选中”，直接把对应
value值写进初始数组即可 - 表单重置时，清空数组即可：
fruits.length = 0或fruits.value = []
