vue 多选列表组件

以下是一个使用 Vue.js 实现多选列表组件的示例代码：

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedOptions: this.value
    };
  },
  watch: {
    selectedOptions: function (newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

这个组件接受一个 `options` 数组作为输入，每个选项包含一个 `value` 和 `label` 属性。它还接受一个 `value` 数组作为默认选中的选项。

在组件中使用 `v-for` 循环遍历 `options` 数组来渲染每个选项。通过使用 `v-model` 指令将 `selectedOptions` 数组绑定到每个复选框的状态上，以便在选项被选中或取消选中时更新它。

当 `selectedOptions` 数组发生变化时，组件会触发一个名为 `input` 的事件，并传递更新后的数组作为参数。父组件可以通过监听这个事件来获取选中的选项。