<template>
<!-- 可以看到v-model绑定的是proxyValue，而非直接绑定外部传入的value -->
<el-select
v-model="proxyValue"
>
<template v-for="(item, i) in options">
<el-option
:key="item.value
:label="item.label"
:value="item.value"
/>
</template>
</el-select>
</template>
<script>
export default {
name: "BaseSelect",
props: {
options: {
type: Array,
default () {
return []
}
},
value: {
type: [String, Array, Number, Boolean],
default () {
return []
}
}
},
computed: {
proxyValue: {
get () {
// 访问的时候直接返回传入的value
return this.value
},
set (val) {
// 修改了proxyValue，在触发set的同时，通过$emit的方式，让外部去执行值的修改
this.$emit('update:value', val)
}
}
}
}
</script>
