Vue自定义复选框组件：如何获取选中值并存入数组？

核心问题梳理 #

你的代码存在3个关键错误：

1. 父组件绑定逻辑错误：用数组selected_name却以selected_name[name]方式绑定，不符合复选框组的数组存储逻辑
2. 子组件data写法错误：组件的data必须是返回对象的函数，不能直接定义为对象
3. 子组件v-model实现混淆：同时混用Vue2和Vue3的v-model语法，导致状态更新事件无法正确传递给父组件

父组件修正代码 #

直接将v-model绑定到selected_name数组，并给子组件传递当前选项的value为循环的name：

<cbComp
  v-for="name in names"
  :key="name"
  v-model="selected_name"
  :option-value="name">
  <span>{{ name }}</span>
</cbComp>

Name: {{ selected_name }}

data部分保持数组定义即可：

data () {
  return {
    names: ['Michael', 'Millie', 'Brown'],
    selected_name: []
  }
},

子组件（cbComp）修正代码 #

模板部分

复选框的value绑定父组件传递的选项值，v-model绑定计算属性来处理选中状态：

<template>
  <label class="checkbox">
    <input
      :id="optionValue"
      type="checkbox"
      :value="optionValue"
      v-model="isChecked"
    >
    <label :for="optionValue">
      <slot/>
    </label>
  </label>
</template>

JS部分

统一用Vue3的v-model规范（若使用Vue2，只需将modelValue改为value，update:modelValue改为input）：

export default {
  props: {
    optionValue: {
      // 接收父组件传递的选项具体值
      type: String,
      required: true
    },
    modelValue: {
      // 接收父组件的选中值数组
      type: Array,
      default: () => []
    }
  },
  computed: {
    isChecked: {
      get() {
        // 判断当前选项是否在选中数组中
        return this.modelValue.includes(this.optionValue)
      },
      set(isChecked) {
        let newSelectedArr
        if (isChecked) {
          // 选中时添加选项到数组
          newSelectedArr = [...this.modelValue, this.optionValue]
        } else {
          // 取消时从数组移除选项
          newSelectedArr = this.modelValue.filter(item => item !== this.optionValue)
        }
        // 触发事件更新父组件的v-model绑定值
        this.$emit('update:modelValue', newSelectedArr)
      }
    }
  }
}

效果验证 #

修改后，选中复选框时对应的名称会自动加入selected_name数组，取消选中时会从数组中移除，{{ selected_name }}会实时显示当前选中的所有名称。

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