父组件和两个子组件的三个输入框内容实时更新。父子传值，兄弟传值。

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 修改自己的值。

标签：newSize,form,输入框,组件,true,传值,size
来源： https://blog.csdn.net/qq_45325810/article/details/122597960