vue 3 中a-checkbox-group

在 Vue 3 中，可以使用 `v-model` 指令和 `v-bind` 指令结合使用来实现复选框组件的功能。具体实现步骤如下：

1. 在组件中使用 `v-model` 指令绑定一个数组类型的变量，用于存储选中的选项值。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="checkbox" :value="option.value" v-model="selectedOptions"> {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: '选项1',
          value: 'option1',
        },
        {
          label: '选项2',
          value: 'option2',
        },
        {
          label: '选项3',
          value: 'option3',
        },
      ],
      selectedOptions: [],
    };
  },
};
</script>

2. 在组件中使用 `v-bind` 指令绑定 `checked` 属性，用于判断当前选项是否已经被选中。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="checkbox" :value="option.value" v-model="selectedOptions" :checked="selectedOptions.includes(option.value)"> {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: '选项1',
          value: 'option1',
        },
        {
          label: '选项2',
          value: 'option2',
        },
        {
          label: '选项3',
          value: 'option3',
        },
      ],
      selectedOptions: [],
    };
  },
};
</script>

这样就实现了一个简单的复选框组件。需要注意的是，由于 Vue 3 中取消了 `$attrs` 和 `$listeners` 属性，因此如果需要将 `v-model` 绑定的值传递给父组件或者监听复选框的事件，需要使用 `emit` 方法手动触发事件。