vue3实现checkbox复选框多选组件的完整代码

以下是一个完整的Vue3实现多选复选框组件的代码示例：

CheckboxGroup.vue：

<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>

<script>
import { reactive } from 'vue';

export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Array,
      required: true,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      checkedValues: props.value,
    });

    function handleChange() {
      emit('update:value', state.checkedValues);
    }

    return {
      state,
      handleChange,
    };
  },
  watch: {
    value(newValue) {
      this.state.checkedValues = newValue;
    },
  },
};
</script>

使用该组件的示例：

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

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

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

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

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

需要注意的是，在使用该组件时，需要使用v-model指令来绑定选中的值。同时，该组件也支持通过props传入初始值和选项列表。在组件内部，使用emit函数来触发父组件的事件，更新选中的值。最后，使用watch函数来监听父组件传入的选中值的变化，使组件能够响应外部的变化。