Vue.js中如何通过数据绑定向父组件传递对象？

问题根源 #

原生HTML的<select>和<option>元素的value属性仅支持字符串类型。当你给<option>绑定:value="data"（一个对象）时，浏览器会自动将对象转换为字符串"[Object object]"，这就是你拿到的不是真实对象的原因。

解决方案 #

你可以通过「标识映射」的方式，先传递对象的唯一标识（比如id或数组索引），再在事件处理中还原为原对象，具体有两种实现方式：

方式一：通过国家ID映射（推荐，更稳定）

修改子组件的<select>和事件处理逻辑：

<select 
  id="countrySelect" 
  :value="country?.id" 
  @change="handleChange"> 
  <option selected disabled value="">Choose...</option> 
  <option v-for="data in countries" :value="data.id" :key="data.id">{{ data.name }}</option> 
</select>

<script>
export default {
  props: { country: Object },
  emits: ['update:country'],
  methods: {
    handleChange(e) {
      const selectedId = parseInt(e.target.value);
      // 根据ID找到对应的国家对象
      const selectedCountry = this.countries.find(c => c.id === selectedId);
      // 触发事件传递真实对象，若未选择则传null
      this.$emit('update:country', selectedCountry || null);
    }
  }
}
</script>

方式二：通过数组索引映射（适合数组顺序固定的场景）

如果你的国家列表顺序不会变动，也可以用索引来匹配：

<select 
  id="countrySelect" 
  :value="countries.indexOf(country)" 
  @change="handleChange"> 
  <option selected disabled>Choose...</option> 
  <option v-for="(data, index) in countries" :value="index" :key="data.id">{{ data.name }}</option> 
</select>

<script>
export default {
  props: { country: Object },
  emits: ['update:country'],
  methods: {
    handleChange(e) {
      const selectedIndex = parseInt(e.target.value);
      // 根据索引获取原对象，索引为-1时对应默认选项
      const selectedCountry = selectedIndex >= 0 ? this.countries[selectedIndex] : null;
      this.$emit('update:country', selectedCountry);
    }
  }
}
</script>

后续验证 #

修改后，父组件的changeCountry方法就能拿到真实的国家对象，直接存入store即可：

changeCountry(value) { 
  console.log(value); // 现在会输出完整的国家对象
  this.store.requestObject.country = value; 
}

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