vue3.0封装select

Vue 3.0 中可以使用 Composition API 来封装一个 Select 组件。下面是一个简单的 Select 组件的示例代码：

<template>
  <div class="select">
    <label>{{ label }}</label>
    <select v-model="selectedValue" @change="handleChange">
      <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    label: String,
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.value)

    function handleChange(event) {
      selectedValue.value = event.target.value
      emit('update:value', selectedValue.value)
    }

    return {
      selectedValue,
      handleChange
    }
  }
}
</script>

在这个示例中，我们使用了 `ref` 创建了一个响应式的 `selectedValue` 变量，并在 `handleChange` 方法中更新了它的值。同时，我们也使用了 `emit` 方法来触发一个名为 `update:value` 的事件，以便父组件可以监听到 `selectedValue` 变量的变化。

在父组件中使用这个 Select 组件时，可以像这样：

<template>
  <div>
    <Select label="选择" :options="options" v-model="selectedOption" />
  </div>
</template>

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

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

在这个示例中，我们将 `options` 数组作为属性传递给了 Select 组件，同时使用 `v-model` 指令将 `selectedOption` 变量绑定到了 Select 组件的 `value` 属性上。这样，当用户选择不同的选项时，`selectedOption` 变量的值也会随之变化。