子组件
<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>