vue3封装一个Select下拉选择器组件

在Vue 3中，你可以创建一个封装了<select>元素的组件。以下是一个简单的例子：

<template>
  <select :value="modelValue" @change="$emit('update:modelValue', $event.target.value)">
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>
 
<script>
export default {
  name: 'MySelect',
  props: {
    modelValue: [String, Number],
    options: {
      type: Array,
      default: () => []
    }
  }
};
</script>

使用该组件时，你需要传入modelValue（用于v-model）和一个包含选项的options数组。

<template>
  <MySelect v-model="selected" :options="selectOptions" />
</template>
 
<script>
import MySelect from './MySelect.vue';
 
export default {
  components: {
    MySelect
  },
  data() {
    return {
      selected: '',
      selectOptions: [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        // 更多选项...
      ]
    };
  }
};
</script>

在这个例子中，MySelect组件通过v-model与父组件中的selected数据保持同步。options数组定义了下拉菜单中的选项。