vue3简单封装一个下拉框选项组件

<template>
  <select v-model="selected">
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>
 
<script>
export default {
  name: 'Dropdown',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selected: this.modelValue
    };
  },
  watch: {
    selected(newValue) {
      this.$emit('update:modelValue', newValue);
    },
    modelValue(newValue) {
      this.selected = newValue;
    }
  }
};
</script>

这个简单的下拉框组件接收两个props：modelValue（下拉框的当前选中值）和options（一个包含下拉选项的数组）。它使用v-model来创建一个双向绑定，这样父组件中的状态和下拉框的选中状态会保持同步。