Vue自定义选择框如何直接绑定至person.gender模型？

看起来你现在的问题是自定义的select-box组件内部维护了独立的selected状态，但没和父组件的v-model做好双向绑定。要解决这个问题，我们得遵循Vue自定义组件支持v-model的规则，下面是具体的修改方案：

核心思路 #

Vue的v-model在自定义组件上的工作逻辑很清晰：

• 默认会把父组件绑定的值传递给组件的value prop
• 同时监听组件触发的input事件，一旦事件触发就更新父组件的绑定值

所以我们要调整组件，让它不再自己维护selected状态，而是通过prop接收父组件的值，选中选项时触发input事件通知父组件更新。

修改后的组件代码 #

<script>
export default {
  // 新增value prop，用来接收父组件v-model绑定的值
  props: ['title', 'options', 'value'],
  data () {
    return {
      dropdownVisible: false,
      // 移除原来的selected，不再内部维护状态
    }
  },
  methods: {
    toggleOptions() {
      this.dropdownVisible = !this.dropdownVisible
    },
    selectValue(option) {
      // 触发input事件，把选中的值传递给父组件
      this.$emit('input', option);
      this.toggleOptions();
    }
  }
}
</script>

父组件用法简化 #

现在你可以直接用v-model绑定person.gender，不需要额外绑定:value了（而且原来的:value="selected"其实是多余的，因为selected是子组件内部的状态）：

<select-box 
  :options="['Male', 'Female']" 
  title="Gender" 
  v-model="person.gender"
></select-box>

另外记得把options数组里的多余逗号去掉，避免控制台出现不必要的警告。

可选：自定义v-model的prop和事件名称 #

如果你不想用默认的value prop和input事件，还可以在组件里通过model选项自定义：

<script>
export default {
  model: {
    prop: 'selectedGender', // 自定义prop名称
    event: 'genderChanged' // 自定义事件名称
  },
  props: ['title', 'options', 'selectedGender'],
  data () {
    return {
      dropdownVisible: false,
    }
  },
  methods: {
    toggleOptions() {
      this.dropdownVisible = !this.dropdownVisible
    },
    selectValue(option) {
      this.$emit('genderChanged', option);
      this.toggleOptions();
    }
  }
}
</script>

父组件的v-model用法完全不变，Vue会自动把person.gender绑定到selectedGender prop，并监听genderChanged事件来更新值。

这样修改后，你的自定义选择框选中的值就会直接同步到person.gender模型上了。

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