vue select 通过props绑定数据

时，如何实现双向绑定的？

Vue中实现双向绑定通常使用v-model指令。在使用v-model指令时，我们需要同时传递一个值prop和一个更新值的事件prop给子组件。因此，我们可以这样实现：

父组件中：

<template>
  <div>
    <my-select v-model="selected"></my-select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

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

export default {
  components: {
    MySelect
  },
  data() {
    return {
      selected: null
    }
  }
}
</script>

子组件中：

<template>
  <div>
    <select :value="value" @input="updateValue($event.target.value)">
      <option disabled value="">请选择</option>
      <option v-for="option in options" :value="option.value">
        {{ option.text }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    options: Array
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value)
    }
  }
}
</script>

这样，在父组件中通过v-model指令绑定selected值，子组件中通过props绑定value以及options，通过事件更新父组件中的selected值，就可以实现双向绑定了。