Vue.js 2中能否用单个v-model绑定表单组件的对象值？

完全可以通过单个v-model绑定整个user对象来实现表单预填和数据更新，不需要像第二个示例那样逐个指定属性。下面是具体实现方案：

子组件myForm的实现 #

核心思路是利用Vue 3中v-model的语法糖：通过modelValue prop接收父组件传入的对象，通过update:modelValue事件回传更新后的对象。

模板部分 #

<template>
  <div class="form-group">
    <label>名字</label>
    <input
      type="text"
      :value="modelValue.firstName"
      @input="updateField('firstName', $event.target.value)"
    />

    <label>姓氏</label>
    <input
      type="text"
      :value="modelValue.lastName"
      @input="updateField('lastName', $event.target.value)"
    />

    <label>邮箱</label>
    <input
      type="email"
      :value="modelValue.email"
      @input="updateField('email', $event.target.value)"
    />

    <label>手机号</label>
    <input
      type="tel"
      :value="modelValue.phone"
      @input="updateField('phone', $event.target.value)"
    />
  </div>
</template>

脚本部分 #

<script setup>
// 定义接收的props，指定modelValue为对象类型
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    // 提供默认空对象，避免未传入时出错
    default: () => ({
      firstName: '',
      lastName: '',
      email: '',
      phone: ''
    })
  }
})

// 定义触发更新的事件
const emit = defineEmits(['update:modelValue'])

// 更新字段的方法：复制原对象并修改对应属性，避免直接修改props（单向数据流规则）
const updateField = (fieldName, newValue) => {
  const updatedUser = { ...props.modelValue, [fieldName]: newValue }
  emit('update:modelValue', updatedUser)
}
</script>

父组件的使用 #

父组件直接用单个v-model绑定user对象即可，和你最初的代码一致：

<template>
  <div> 
    <myForm v-model="user" />
    <!-- 可以实时查看更新后的user数据 -->
    <pre>{{ user }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import myForm from './myForm.vue'

// 初始化user对象，用于预填表单
const user = ref({
  firstName: '李',
  lastName: '四',
  email: 'lisi@example.com',
  phone: '13900139000'
})
</script>

两种方式的对比 #

• 单个v-model绑定对象：代码更简洁，适合表单字段和对象属性一一对应的场景，便于统一管理表单数据。
• 逐个v-model绑定属性：适合只需要更新部分属性的场景，但代码冗余，维护成本更高。

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