基于vue3封装select组件

子组件

<script setup>
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
defineProps({
  value: {
    require: true,
    type: String
  }
})
const emit = defineEmits(['update:modelValue'])
</script>

两种select组件获取修改后的值

• @update:modelValue="(value) => emit('update:modelValue', value)"

• @update:modelValue="emit('update:modelValue', $event)"

<template>
  <el-select
    placeholder="请选择"
    style="width: 240px"
    :modelValue="value"
    @update:modelValue="emit('update:modelValue', $event)"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

父组件调用

<script setup>
import { ref } from 'vue'    
cosnt value1=ref(Option1)
const change=（value）=>{
    console.log('获取修改后的值:',value)
    //响应选择后的值
    value1.value=value
}
</script>

<template>
    <---简单赋值使用--->
<Select-Com v-model="value1"></Select-Com>
    <---复杂赋值使用--->
<Select-Com :modelValue="value1" @update:modelValue="change"></Select-Com>
</template>