vue3实现多个checkbox复选框的组件

可以使用Vue3中的组合式API来实现一个多个checkbox复选框的组件。

首先，需要在组件中定义一个data变量来存储选中的值：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      checkedValues: [],
    });

    return {
      state,
    };
  },
};

然后，在模板中使用v-for指令来渲染多个checkbox，并绑定checked属性和change事件：

<template>
  <div>
    <label v-for="(option, index) in options" :key="index">
      <input type="checkbox"
             :value="option.value"
             v-model="state.checkedValues"
             @change="handleChange">
      {{ option.label }}
    </label>
  </div>
</template>

在change事件处理函数中，可以获取到选中的值，并将其存储到data变量中：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      checkedValues: [],
    });

    const options = [
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' },
    ];

    function handleChange() {
      console.log(state.checkedValues);
    }

    return {
      state,
      options,
      handleChange,
    };
  },
};

最后，可以在组件外部使用该组件，并监听其checkedValues变量的变化：

<template>
  <div>
    <CheckboxGroup v-model="checkedValues" />
    <p>选中的值：{{ checkedValues }}</p>
  </div>
</template>

<script>
import CheckboxGroup from './CheckboxGroup.vue';
import { reactive } from 'vue';

export default {
  components: {
    CheckboxGroup,
  },
  setup() {
    const state = reactive({
      checkedValues: [],
    });

    return {
      state,
    };
  },
};
</script>

这样，就可以实现一个多个checkbox复选框的组件。