1. 场景说明

1）总体说明：当父组件的输入框或子组件1、子组件2的输入框输入值时，另外两个输入框要实时更新值。
2）技术点：父子通信，兄弟组件借助父组件通信、监听器。

2. 数据整体说明

父组件的表单对象是form，输入框的值是form.size。
子组件1的表单对象是tolForm，输入框的值是tolForm.size。
子组件2的表单对象是coordinationForm，输入框的值是coordinationForm.size。

3. 父组件

1） html结构部分

// 父组件输入框
<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" ><a-form-model-item ref="size" label="基本尺寸" prop="size"><a-input v-model.number="form.size" @blur=" () => { $refs.size.onFieldBlur(); } " @input="sizeChange" /></a-form-model-item>
</a-form-model>// 子组件1
<tolQuery :tabKey="tabKey" :form="form" @sendParent="sendParent"></tolQuery>
// 子组件2
<coordinationQuery :tabKey="tabKey" :form="form" @sendParent="sendParent"></coordinationQuery>

2）js部分

sendParent(childSize){this.form.size = childSize
}

4. 子组件1

1）js部分

created() {this.sendChild() // 页面初始化时，接收父组件传来的数据
},props: {form: Object
},watch:{"form.size":{immediate:true,deep:true,handler(newSize){this.tolForm.size = newSize}},"tolForm.size":{immediate:true,deep:true,handler(newSize){this.$emit("sendParent",newSize)}},
},methods: {sendChild() {this.tolForm.size = this.form.size},
}

2）html部分
与父组件一样，变量名改一下即可。

5. 子组件2

1）js部分

created() {this.sendChild() // 页面初始化时，接收父组件传来的数据
},props: {form: Object
},watch:{"form.size":{immediate:true,deep:true,handler(newSize){this.coordinationForm.size = newSize}},"coordinationForm.size":{immediate:true,deep:true,handler(newSize){this.$emit("sendParent",newSize)}},
},methods: {sendChild() {this.coordinationForm.size = this.form.size},
}

2）html部分
与父组件一样，变量名改一下即可。

6. 逻辑解释

当父组件输入size时，通过 :form="form" 将表单对象发给子组件，子组件通过 props接收，并通过created () { this.sendChild() }在页面初始化时更新自己的size。

当父组件再次输入新的size时，子组件需要更新自己的size。此时子组件使用 watch 监听父组件传来的"form.size" 变化，当它发生变化时，修改自己的size。

子组件输入值的时候，通过 watch 监听 "tolForm.size" 和 "coordinationForm.size" 的变化，再用 this.$emit("sendParent",newSize) 向父组件发送该值。

父组件通过 @sendParent="sendParent" 接收子组件传来的值，并用 sendParent 修改自己的值。