Vue中将下拉列表选中值传递给prop的最佳实现方式是什么

你代码中存在2个核心问题导致选中值无法正常传递：

• 违反Vue单向数据流规则，直接用v-model绑定props值
  Vue规定props只能由父组件传递更新，子组件不能直接修改prop值，你直接把<select>的v-model绑定到prop selected上，修改下拉选中值的时候不会更新父组件的源数据，还会触发控制台隐式警告。
• props声明语法错误
  你写的props: { selected: '' }是错误写法，正确的props声明需要指定参数类型，例如字符串类型要写成selected: String。

修复步骤 #

1. 修正props声明 #

先把prop的声明改对：

props: {
  // 正确声明类型，可根据需要设置默认值
  selected: {
    type: String,
    default: ''
  },
  modelName: {
    default: 'CcRequest'
  }
}

2. 用自定义事件同步选中值到父组件 #

子组件不要直接绑定prop到v-model，改为绑定带get/set的计算属性适配v-model，触发事件通知父组件更新数据：
在computed里新增属性：

computed: {
  // 保留原有computed逻辑
  ...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),    
  ccTypesCollection() {
    return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
  },
  // 新增适配v-model的计算属性
  localSelected: {
    get() {
      return this.selected
    },
    set(val) {
      // 触发更新事件通知父组件
      this.$emit('update:selected', val)
    }
  }
}

然后把模板里的select绑定修改为：

<select v-model="localSelected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

3. 父组件添加.sync修饰符接收更新 #

父组件调用CcRequestForm组件时，加上.sync修饰符即可自动同步更新：

<CcRequestForm :selected.sync="父组件存储选中值的变量" />

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