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