vue3写一个选择界面

在Vue3中创建一个选择界面通常涉及组件化设计，可以使用`<select>`元素作为基础，配合v-model指令来双向绑定数据。下面是一个简单的例子，展示如何使用自定义的Select组件：

首先，假设我们有一个名为`Option.vue`的选择项组件，它接收`value`和`text`属性：

<!-- Option.vue -->
<template>
  <li class="option" @click="$emit('select', $event.target.value)">
    {{ text }}
  </li>
</template>

<script setup>
import { ref } from 'vue';

export default {
  props: {
    value: String,
    text: String
  },
  emits: ['select']
};
</script>

然后，在主应用组件中，比如`App.vue`，我们可以创建一个`<CustomSelect>`组件并管理选项：

<!-- App.vue -->
<template>
  <div>
    <CustomSelect :options="options" v-model="selectedValue"></CustomSelect>
    <p>选中的值：{{ selectedValue }}</p>
  </div>
</template>

<script>
import SelectComponent from './components/Option.vue';
const options = ["Option 1", "Option 2", "Option 3"];
export default {
  components: {
    CustomSelect: {
      // 使用Composition API
      setup(props) {
        const selectedValue = ref('');
        const selectOption = (value) => {
          selectedValue.value = value;
        };

        return { options, selectedValue, selectOption };
      },
      render() {
        return (
          <ul class="custom-select">
            {options.map((option) => (
              <SelectComponent :value="selectedValue" :text="option" @select={selectOption} />
            ))}
          </ul>
        );
      }
    }
  }
};
</script>

在这个例子中，`CustomSelect`组件渲染出一个包含所有选项的列表，当选中某个选项时，它会触发`select`事件并将新的值传递给`selectedValue`。