Vue向组件传递Contact对象实现可编辑双向绑定的报错求解

错误原因 #

你在触发update:contact事件时，直接将输入框返回的字符串作为参数抛出，父组件的v-model:contact会直接把整个contact对象替换为该字符串，触发Prop的Object类型校验失败。

修复方案 #

修改子组件的更新逻辑，每次修改单个字段时抛出完整的新contact对象即可，父组件代码无需改动。

方案1：直接修改模板（简单快速） #

<template>
  <el-input
      :value="contact.firstName"
      @input="$emit('update:contact', { ...contact, firstName: $event })"
  />
  <el-input 
    :value="contact.lastName"
    @input="$emit('update:contact', { ...contact, lastName: $event })"
  ></el-input>
  <el-input 
    :value="contact.phone"
    @input="$emit('update:contact', { ...contact, phone: $event })"
  ></el-input>
  <el-input 
    :value="contact.email"
    @input="$emit('update:contact', { ...contact, email: $event })"
  ></el-input>
  <el-input 
    :value="contact.description"
    @input="$emit('update:contact', { ...contact, description: $event })"
  ></el-input>
</template>

<script>
export default {
  name: "ContactDetails",
  props: {
    contact: {
      type: Object,
      required: true
    }
  },
  emits: ['update:contact']
}
</script>

方案2：封装更新方法（适合字段多的场景） #

如果后续需要新增字段，可封装公共更新方法简化代码：

<template>
  <el-input
      :value="contact.firstName"
      @input="updateField('firstName', $event)"
  />
  <el-input 
    :value="contact.lastName"
    @input="updateField('lastName', $event)"
  ></el-input>
  <!-- 其余字段同理 -->
</template>

<script>
export default {
  name: "ContactDetails",
  props: {
    contact: {
      type: Object,
      required: true
    }
  },
  emits: ['update:contact'],
  methods: {
    updateField(field, value) {
      this.$emit('update:contact', {
        ...this.contact,
        [field]: value
      })
    }
  }
}
</script>

实现原理：通过对象展开运算符...复制原有contact的所有属性，再覆盖当前修改的字段值，抛出一个完整的新contact对象，既符合单向数据流规范，也不会出现类型错误。

内容的提问来源于stack exchange，提问作者Ace of Spade