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

2022-01-20 12:58:14 阅读：152 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。