Vue组件多属性v-model绑定如何简化为单个对象绑定？

完全可以实现你要的简化写法，分两种场景处理：

场景1：可以修改组件源码（推荐） #

只需要调整组件内部的v-model绑定逻辑，对外暴露单个对象类型的v-model即可：

1. 组件内定义modelValue属性，类型为对象，结构和你的address一致
2. 字段修改时通过update:modelValue事件抛出完整的新address对象，遵循Vue单向数据流规范

子组件代码示例 #

<template>
  <!-- 内部表单字段绑定 -->
  <input v-model="localName" placeholder="姓名">
  <input v-model="localAddressLine" placeholder="地址行">
  <!-- 剩余字段按相同逻辑处理即可 -->
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      name: '',
      addressLine: '',
      streetNumber: '',
      town: '',
      country: '',
      postcode: '',
      phoneNumber: '',
      homeAddress: false
    })
  }
})
const emit = defineEmits(['update:modelValue'])

// 每个字段用computed封装读写逻辑
const localName = computed({
  get: () => props.modelValue.name,
  set: val => emit('update:modelValue', { ...props.modelValue, name: val })
})
const localAddressLine = computed({
  get: () => props.modelValue.addressLine,
  set: val => emit('update:modelValue', { ...props.modelValue, addressLine: val })
})
// 剩余字段同理定义即可
</script>

父组件使用方式 #

直接按你的预期写法调用即可：

<b-address v-model="address" />

注意：父组件的address对象初始化时建议声明所有字段，避免出现响应式丢失问题

场景2：无法修改源码（比如是第三方组件） #

可以封装一层自定义中转组件，把多v-model的绑定逻辑封装在内层，对外暴露单个对象v-model：

<!-- 你自己封装的MyAddress.vue组件 -->
<template>
  <b-address 
    v-model:name="props.modelValue.name" 
    v-model:addressLine="props.modelValue.addressLine"
    v-model:streetNumber="props.modelValue.streetNumber" 
    v-model:town="props.modelValue.town" 
    v-model:country="props.modelValue.country"
    v-model:postcode="props.modelValue.postcode" 
    v-model:phoneNumber="props.modelValue.phoneNumber"
    v-model:homeAddress="props.modelValue.homeAddress"
    @update:name="val => emit('update:modelValue', {...props.modelValue, name: val})"
    @update:addressLine="val => emit('update:modelValue', {...props.modelValue, addressLine: val})"
    <!-- 剩余字段的update事件同理处理 -->
  />
</template>

<script setup>
const props = defineProps({ modelValue: Object })
const emit = defineEmits(['update:modelValue'])
</script>

父组件直接调用你封装的组件即可：

<MyAddress v-model="address" />

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