回答

给出一个子组件示例

<template>
	<picker @change="handleChange" :value="index" :range="options" :range-key="rangeKey">
		{{currentValue || placeholoder}}
	</picker>
</template>

<script>
	export default {
		name: "myPicker",
		props: {
			value: String | Number,
			options: Array,
			rangeKey: String,
			rangeValue: {
				type: String,
				default: "value"
			},
			placeholoder: {
				type: String,
				default: "请选择"
			}
		},
		data() {
			return {
				index: -1
			};
		},
		computed: {
			currentValue() {
				if (this.rangeKey) {
					return this.index == -1 ? "" : this.options[this.index][this.rangeKey]
				} else {
					return this.options[this.index]
				}
			}
		},
		watch: {
			value(val) {
				this.index = this.rangeKey ? this.options.findIndex(item => item[this.rangeValue] == val) : this.options.findIndex(item => item == val);
			}
		},
		methods: {
			handleChange(e) {
				this.index = e.target.value;
				let currentValue = this.rangeKey ? this.options[this.index][this.rangeValue] : this.options[this.index];
				this.$emit("input", currentValue)
				this.$emit("change", currentValue)
			},
		}
	}
</script>

<!-- 纯数组形式 -->
<myPicker :options="options" v-model="currentValue"></myPicker>
<!-- 数组对象形式 -->
<myPicker :options="options" v-model="currentValue" rangeKey="label"></myPicker>