Vue如何实现自定义组件的数组输入绑定？

问题背景 #

原生Vue复选框可通过v-model绑定数组，自动收集所有勾选框的value值，但现有自定义CheckBox.vue组件仅支持绑定单个布尔值，无法实现多组件绑定同一数组收集勾选值的效果——直接绑定数组时仅第一个组件生效，其余组件无作用。

原组件代码：

<script lang="ts" setup>
import { ref } from "vue";

const modelValue = ref(false);

const emit = defineEmits<{ "update:modelValue": [modelValue: boolean] }>();

function handle() {
  modelValue.value = !modelValue.value;

  emit("update:modelValue", modelValue.value);
}
</script>

<template>
  <label>
    <button type="button" @click="handle">
      <span v-if="modelValue">✔️</span>
    </button>
  </label>
</template>

解决方案 #

要让自定义复选框支持绑定数组，需修改组件逻辑，使其接收自定义value属性，并根据勾选状态向父组件数组添加/移除对应值，而非直接传递布尔值。

步骤1：修改组件，适配数组与单值两种绑定模式 #

更新后的CheckBox.vue：

<script lang="ts" setup>
import { computed } from "vue";

// 接收父组件传入的绑定值和自定义选项值
const props = defineProps<{
  modelValue: boolean | any[];
  value: any; // 每个复选框对应的数据值
}>();

const emit = defineEmits<{
  "update:modelValue": [value: boolean | any[]];
}>();

// 计算当前组件是否被勾选
const isChecked = computed(() => {
  // 数组模式：判断当前value是否在绑定数组中
  if (Array.isArray(props.modelValue)) {
    return props.modelValue.includes(props.value);
  }
  // 单值模式：直接使用布尔值判断
  return props.modelValue;
});

function handle() {
  let newValue;
  if (Array.isArray(props.modelValue)) {
    // 数组模式：勾选则添加值，取消则移除值
    newValue = isChecked.value
      ? props.modelValue.filter(item => item !== props.value)
      : [...props.modelValue, props.value];
  } else {
    // 单值模式：切换布尔状态
    newValue = !isChecked.value;
  }
  emit("update:modelValue", newValue);
}
</script>

<template>
  <label>
    <button type="button" @click="handle">
      <span v-if="isChecked">✔️</span>
    </button>
  </label>
</template>

步骤2：父组件中绑定数组使用组件 #

父组件示例：

<script lang="ts" setup>
import { ref } from "vue";
import CheckBox from "./CheckBox.vue";

// 用于收集勾选值的数组
const selectedValues = ref<string[]>([]);
</script>

<template>
  <CheckBox v-model="selectedValues" value="选项1" />
  <CheckBox v-model="selectedValues" value="选项2" />
  <CheckBox v-model="selectedValues" value="选项3" />

  <p>已选值：{{ selectedValues }}</p>
</template>

原理说明 #

• 新增value props：定义每个复选框对应的数据标识，作用等同于原生复选框的value属性；
• 计算属性isChecked：根据父组件绑定值的类型（数组/布尔值），判断当前组件是否处于勾选状态；
• 点击事件逻辑：数组模式下通过添加/移除value更新数组，单值模式下切换布尔状态，最终通过emit同步父组件的绑定值。

修改后，多个自定义复选框即可像原生复选框一样，将勾选的value值自动收集到同一数组中。

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