Demo
<template>
<el-select
:modelValue="modelValue"
placeholder="学院"
@update:modelValue="(val) => $emit('update:modelValue', val)"
>
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "AcademicSelect",
});
</script>
<script lang="ts" setup>
defineProps({
modelValue: {
type: String,
required: true,
default: "-1",
},
});
defineEmits(["update:modelValue"]);
const options = [
"理学院",
"材料科学与工程学院",
"服装学院",
"信息学院",
"机械与自动控制学院",
"建筑工程学院",
"生命科学与医药学院",
"经济管理学院",
"艺术与设计学院",
"法政学院",
"外国语学院",
"国际教育学院",
"继续教育学院",
];
</script>
<style scoped></style>
参考文章
v-model
参数- 如何优雅的在嵌套组件中都使用v-model
- vue 子组件快速更改父组件prop的置 update:modelValue
- 嵌套 v-model 解决 Unexpected mutation of “XXX“ prop
vue/no-mutating-props
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)