Javascript 避免在嵌套形式中改变道具

假设我有一个表单，分为两个部分，每个部分通过道具与父表单进行通信。我如何避免变异从父窗体传递的道具

---

ParentForm.vue

而不是道具
让您的孩子使用
v-model
而不是传递道具：

AddressForm.vue

<template>
  <div>
    <input :value="value.address_no" @input="$emit('input',{...value,address_no:$event.target.value)" />
    <input :value="value.country" @input="$emit('input',{...value,country:$event.target.value)" />
  </div>
</template>

<script>
export default {
  name: "AddressForm",
  props: { value: { type: Object, required: true } },
};
</script>


导出默认值{
名称：“AddressForm”，
属性：{value:{type:Object，必需：true}，
};

其他形式：

<template>
  <div>
    <textarea :value="value.remarks" @input="$emit('input',{...value,remarks:$event.target.value)"/>
  </div>
</template>

<script>
export default {
  name: "OtherForm",
  props: { value: { type: Object, required: true } },
};
</script>


导出默认值{
名称：“其他形式”，
属性：{value:{type:Object，必需：true}，
};

在父组件中：

    <AddressForm v-model="formData.address" />
    <OtherForm v-model="formData.other" />

您可以在
beforeMount（）
中将这些道具分配给一些数据值，然后$emit将它们发送回来。

显然，
v-model
应该引用
data（）
中定义的属性。谢谢，我还有一个问题-在每个@input上发出消息对我来说不是很理想（我正在处理一个非常大的表单）。还有什么方法可以优化它吗？我很乐意为
v-model
指令添加
lazy
修饰符，比如
谢谢，你能举个例子吗？