Data binding Vue js自定义选择-绑定到

我有一个自定义的选择框

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

.vue代码

<script>
    export default {
          props:['title', 'options'],
          data () {
            return {
              selected: this.title,
              dropdownVisible: false,
            }
          },
          methods: {
            toggleOptions() {
              this.dropdownVisible = !this.dropdownVisible
            },
            selectValue(option) {
              this.selected = option;
              this.toggleOptions();
            }
        }

        }

导出默认值{
道具：['title'，'options'，]，
数据（）{
返回{
已选：this.title，
dropdownVisible:false，
}
},
方法：{
切换选项（）{
this.dropdownVisible=！this.dropdownVisible
},
选择值（选项）{
this.selected=选项；
this.toggleOptions（）；
}
}
}

---

如何将所选值直接绑定到模型（person.gender）？

我假设上面的.vue代码属于

选择框

组件

因为我看到您使用了v-model，要将值直接绑定到v-model，您需要在子组件内$emit

您可以更改

selectValue

功能

selectValue(option) {
  this.selected = option;
  this.$emit('input', option);
  this.toggleOptions();
}