Vue.js 2下拉组件默认值设置与父子组件值回传问题求助

针对你遇到的默认选中失效、值无法回传父组件的问题，以下是基于Vue.js 2和v-select的具体解决方案：

核心实现逻辑 #

• 通过props从父组件传递选项集合与默认选中值到子组件
• 子组件内部维护选中状态，利用v-select的v-model绑定值，通过自定义事件将选中结果回传给父组件，或用.sync修饰符简化双向绑定

完整代码示例 #

子组件 componentPullDown.vue #

<template>
  <v-select
    :items="options"
    v-model="innerSelected"
    @input="onSelectChange"
    placeholder="请选择"
    <!-- 若选项为对象，可指定item-value匹配字段 -->
    <!-- item-value="value" -->
  ></v-select>
</template>

<script>
export default {
  props: {
    // 父组件传入的选项列表
    options: {
      type: Array,
      required: true
    },
    // 父组件传入的默认选中项
    defaultSelected: {
      type: [String, Number, Object],
      default: null
    }
  },
  data() {
    return {
      // 子组件内部维护选中值，初始化时同步默认值
      innerSelected: this.defaultSelected
    }
  },
  watch: {
    // 监听父组件默认值变化，同步更新子组件选中状态
    defaultSelected(newVal) {
      this.innerSelected = newVal
    }
  },
  methods: {
    onSelectChange(selectedVal) {
      // 触发自定义事件，将选中值传回父组件
      this.$emit('selected-change', selectedVal)
      // 若使用.sync修饰符，需触发update:xxx格式事件
      // this.$emit('update:defaultSelected', selectedVal)
    }
  }
}
</script>

父组件 main.vue #

<template>
  <div class="parent-container">
    <!-- 使用子组件，传递参数并监听事件 -->
    <component-pull-down
      :options="myOptions"
      :default-selected="currentSelected"
      @selected-change="handleChildSelect"
    ></component-pull-down>

    <!-- 可选：使用.sync修饰符简化双向绑定 -->
    <!-- <component-pull-down
      :options="myOptions"
      :default-selected.sync="currentSelected"
    ></component-pull-down> -->
  </div>
</template>

<script>
import componentPullDown from './componentPullDown.vue'

export default {
  components: {
    componentPullDown
  },
  data() {
    return {
      // 示例选项集合（若为对象需保证结构统一）
      myOptions: [
        { text: '选项A', value: 'a' },
        { text: '选项B', value: 'b' },
        { text: '选项C', value: 'c' }
      ],
      // 父组件默认选中项
      currentSelected: 'b'
    }
  },
  methods: {
    handleChildSelect(val) {
      // 接收子组件传回的选中值，更新父组件状态
      this.currentSelected = val
      console.log('子组件选中值：', val)
    }
  }
}
</script>

关键注意点 #

• 若v-select的选项是对象类型，默认选中项必须是选项数组中存在的对象引用，或通过item-value指定匹配字段（比如item-value="value"），否则无法匹配选中
• 子组件禁止直接修改props值，必须通过内部data变量维护状态，配合watch同步父组件传递的默认值变化
• 使用.sync修饰符时，子组件需触发update:propsName格式的事件，父组件无需手动写事件监听，直接实现双向绑定

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