vue3 select options 封装

您好！针对 Vue3 的 select options 封装，您可以参考以下代码：

<template>
  <select v-model="selectedOption">
    <option v-for="option in options" :value="option.value">{{ option.label }}</option>
  </select>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['update:value'],
  data() {
    return {
      selectedOption: this.value
    }
  },
  watch: {
    selectedOption(newValue) {
      this.$emit('update:value', newValue)
    }
  }
}
</script>

这个组件接收一个 `options` 数组作为参数，其中每个选项都包含一个 `value` 和 `label` 属性。它还接收一个名为 `value` 的参数，该参数指定默认选中的选项。当用户更改选项时，组件会触发一个名为 `update:value` 的事件，以便父组件可以更新绑定的值。

您可以像这样在其他组件中使用此组件：

<template>
  <div>
    <label>请选择一个选项：</label>
    <select-options :options="options" v-model="selectedOption" />
  </div>
</template>

<script>
import SelectOptions from './SelectOptions.vue'

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

在上面的示例中，我们将 `options` 数组作为参数传递给了 `select-options` 组件，并使用 `v-model` 指令将选中的选项绑定到 `selectedOption` 变量上。当用户更改选项时，`selectedOption` 变量将自动更新。