Vue中Select组件选中选项值无法使用的问题求助

子组件修正代码（Comp.vue） #

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: { // 与v-model默认的value prop对齐
      type: [Number, undefined],
      default: undefined
    }
  },
  emits: ['input'],
  computed: {
    localSelected: {
      get() {
        return this.value; // 从父组件prop读取值
      },
      set(newVal) {
        this.$emit('input', Number(newVal)); // 转换为数字类型后发送给父组件
      }
    }
  }
}
</script>

<template>
<div>
  <h1>Hi, I'm a component</h1>
  <select v-model="localSelected">
    <option 
      v-for="option in options" 
      :key="option" 
      :value="option"
    >{{ option }}</option>
  </select>
</div>
</template>

父组件代码（无需修改） #

<script>
import Comp from './Comp.vue'
export default {
  data() {
    return {
      options: [1,2,3,4,5,6],
      optSelected: undefined,
    }
  },
  components: {
    Comp
  }
}
</script>

<template>
  <Comp v-model="optSelected" :options="options"></Comp>
  <p>--->{{ optSelected }}</p>
</template>

关键问题与修复说明 #

1. Prop命名不匹配：Vue 2中v-model默认会把绑定的值传递给子组件的value prop，原代码中子组件用了selectOpt作为prop名称，导致父组件的值无法正确传入。修正为value后即可对齐v-model的默认规则。

2. 直接修改Prop：Vue中Prop是单向数据流，不能直接在子组件中修改。通过计算属性localSelected的getter/setter实现值的同步：getter读取父组件传入的value，setter触发input事件把新值传递回父组件，符合Vue的数据流规范。

3. Option值未绑定：原代码中<option>没有绑定value属性，导致选中后返回的是字符串类型的选项文本（比如"1"而非数字1）。添加:value="option"后，能正确传递数组中的数字值，再通过Number(newVal)转换确保类型一致。

4. 语法错误修正：原代码中props与emits之间缺少逗号，会导致JS解析失败，已在修正代码中补全。

内容的提问来源于stack exchange，提问作者Antonio J