vue checkbox实现原理

Vue Checkbox 实现原理

Vue 中的复选框（Checkbox）实现依赖于双向数据绑定（v-model）和原生 HTML 的 <input type="checkbox"> 元素。核心原理是通过数据驱动视图，将复选框的状态与 Vue 实例的数据属性绑定。

基础实现

1. 单选框绑定
   通过 v-model 绑定一个布尔值，控制复选框的选中状态：

   <template>
     <input type="checkbox" v-model="isChecked">
   </template>
   <script>
   export default {
     data() {
       return { isChecked: false }
     }
   }
   </script>

   • isChecked 为 true 时复选框选中，反之未选中。
   • 用户操作会同步更新 isChecked 的值。

2. 多选框组绑定
   绑定到数组时，复选框的 value 属性会被添加到数组或从数组中移除：

   

   <template>
     <input type="checkbox" v-model="selectedFruits" value="apple">
     <input type="checkbox" v-model="selectedFruits" value="banana">
   </template>
   <script>
   export default {
     data() {
       return { selectedFruits: [] }
     }
   }
   </script>

   • 选中复选框时，其 value 会加入 selectedFruits 数组。
   • 取消选中时，value 从数组中移除。

底层机制

1. v-model 语法糖
   v-model 本质是 :checked 和 @change 的简写：

   <input 
     type="checkbox" 
     :checked="isChecked" 
     @change="isChecked = $event.target.checked"
   >

2. 自定义复选框组件
   封装组件时需手动实现 modelValue 和 update:modelValue：

   

   <template>
     <input 
       type="checkbox" 
       :checked="modelValue" 
       @change="$emit('update:modelValue', $event.target.checked)"
     >
   </template>
   <script>
   export default {
     props: ['modelValue']
   }
   </script>

特殊处理

1. true-value 和 false-value
   可自定义选中/未选中时绑定的值：

   <input 
     type="checkbox" 
     v-model="toggle" 
     true-value="yes" 
     false-value="no"
   >

   • 选中时 toggle 为 "yes"，取消选中为 "no"。

2. 修饰符

   • .lazy：将 input 事件改为 change 事件触发更新。
   • .number：将输入值转为数字。

注意事项

• 多选框组需确保 v-model 绑定的是数组。
• 动态生成复选框时，value 需唯一以避免状态冲突。
• 自定义组件需正确处理 modelValue 和事件。