如何让BaseCheckbox组件同时支持布尔值与数组类型的v-model绑定

要让BaseCheckbox同时支持单个布尔值绑定和数组绑定，核心是根据父组件传递的v-model值类型，分别处理选中状态和更新逻辑。以下是具体实现方案：

修改BaseCheckbox组件 #

组件逻辑调整（Vue3） #

<template>
  <input
    type="checkbox"
    :checked="checkedState"
    @change="handleCheckboxChange"
  />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 扩展v-model支持的类型：布尔值或数组
  modelValue: {
    type: [Boolean, Array],
    required: true
  },
  // 数组模式下的选项值，支持字符串、数字、布尔值
  value: {
    type: [String, Number, Boolean],
    default: null
  }
})

const emit = defineEmits(['update:modelValue'])

// 判断当前是否为数组模式
const isArrayMode = computed(() => Array.isArray(props.modelValue))

// 计算当前复选框的选中状态
const checkedState = computed(() => {
  if (isArrayMode.value) {
    // 数组模式：判断当前value是否在数组中
    return props.modelValue.includes(props.value)
  } else {
    // 布尔模式：直接使用modelValue的布尔值
    return props.modelValue
  }
})

// 处理复选框变更事件
const handleCheckboxChange = (event) => {
  const isChecked = event.target.checked
  
  if (isArrayMode.value) {
    let newModelValue
    if (isChecked) {
      // 选中时，添加当前value到数组（避免直接修改原数组）
      newModelValue = [...props.modelValue, props.value]
    } else {
      // 取消选中时，过滤掉当前value
      newModelValue = props.modelValue.filter(item => item !== props.value)
    }
    emit('update:modelValue', newModelValue)
  } else {
    // 布尔模式：直接传递取反后的布尔值
    emit('update:modelValue', isChecked)
  }
}
</script>

使用示例 #

单个布尔值绑定 #

<template>
  <BaseCheckbox v-model="simpleBoolean" />
</template>

<script setup>
import { ref } from 'vue'
import BaseCheckbox from './BaseCheckbox.vue'

const simpleBoolean = ref(false)
</script>

数组绑定（多选模式） #

<template>
  <BaseCheckbox v-model="fruits" value="apple" />
  <BaseCheckbox v-model="fruits" value="banana" />
</template>

<script setup>
import { ref } from 'vue'
import BaseCheckbox from './BaseCheckbox.vue'

const fruits = ref([])
</script>

关键说明 #

1. 类型兼容：通过modelValue的type属性同时支持Boolean和Array类型，确保组件能识别两种绑定模式。
2. 状态计算：使用computed根据当前模式动态计算复选框的选中状态，数组模式下依赖value属性判断是否在数组中。
3. 事件触发：变更事件中区分模式处理更新逻辑，数组模式下通过创建新数组（避免直接修改父组件状态）来添加/移除选项值，布尔模式下直接传递布尔值。

内容的提问来源于stack exchange，提问作者Theiaz