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

Question

我有一个自定义选择框。

<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();
            }
        }

        }

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

标签： data-bindingvuejs2components

Answer 1

我假设上面的 .vue 代码属于select-box组件。

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

你可以改变你的selectValue功能

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