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

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

上一篇:Vue版Ant Design给a-form表单-赋值及获取表单数据-案例


下一篇:使用 vue element UI 框架对form内容 rules动态验证非空