Vue3自定义Select组件值无法传递至父组件问题排查

你的自定义Select组件无法让父组件v-model接收值，核心问题集中在Vue3的v-model规范适配和代码逻辑错误上：

• Vue3 v-model机制变更：Vue3中默认v-model绑定的prop是modelValue，触发的更新事件是update:modelValue，而非Vue2时期的value和input。你当前emit的input事件，父组件的v-model不会监听，自然无法同步值。
• Prop定义与初始化错误：你在组件props里定义了select，但父组件用默认v-model时，会把值传给modelValue prop，导致组件接收不到初始值；同时内部ref初始化用了props.value，但你的props里根本没有value这个属性。
• 单向数据流未同步：即使prop定义正确，直接用ref(props.xxx)初始化内部变量后，父组件更新prop时，内部ref不会自动同步，需要额外监听。

以下是适配Vue3规范的修正代码：

自定义Select组件代码 #

<template>
  <div class="input-group">
    <label class="label">{{ label }}</label>
    <select v-model="internalSelect">
      <option v-for="option in options" :value="option.id" :key="option.id">
        {{ option.name }}
      </option>
      <option value="" disabled hidden>Select...</option>
    </select>
  </div>
</template>

<script lang="ts">
import { ref, watch, defineProps, defineEmits } from "vue";

export default {
  name: "Select",
  props: {
    options: {
      type: Array,
      required: true,
    },
    // 匹配Vue3默认v-model的prop
    modelValue: {
      type: String,
      default: ""
    },
    label: {
      type: String,
    },
  },
  emits: ['update:modelValue'], // 声明要触发的更新事件
  setup(props, { emit }) {
    // 用父组件传来的modelValue初始化内部状态
    const internalSelect = ref(props.modelValue);

    // 监听内部选择值变化，触发v-model更新事件
    watch(internalSelect, (value) => {
      emit("update:modelValue", value);
    });

    // 监听父组件modelValue的变化，同步到内部状态
    watch(() => props.modelValue, (newValue) => {
      internalSelect.value = newValue;
    });

    return {
      internalSelect,
    };
  },
};
</script>

关键修改说明 #

1. 适配v-model规范：将prop改为modelValue，emit事件改为update:modelValue，和Vue3默认v-model机制对齐。
2. 修正初始化逻辑：用props.modelValue初始化内部ref，避免引用不存在的props.value。
3. 双向同步状态：增加对props.modelValue的监听，确保父组件主动修改值时，内部select能同步更新。
4. 优化默认选项：将隐藏提示选项的value设为空字符串，避免初始值混乱。

父组件的v-model绑定代码保持原有写法即可：

<template>
  <Select
    label="Group Name"
    :options="questions_groups"
    v-model="groupName"
  />
</template>

<script setup>
import { ref } from 'vue';
import Select from './Select.vue';

const questions_groups = ref([/* 你的选项数据 */]);
const groupName = ref(null);
</script>

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