vue兄弟组件通信？-灵析社区
无情编码机器前提是在原来老代码的基础上，保证不影响其他功能。 一个页面多个表单组件来回切换，数据相互关联，怎么优雅的在父页面提交完整的数据，子组件的修改的数据，能够双向同步父组件？ 在原代码基础上很容易扩充字段。
复古直男如果多个组件见有互相控制的，那么使用自定义组件的 "v-model" 规则改造子表单，然后在父级直接用 "v-model" 绑定就可以了。其实就是
"props" + "$emit" 的方式。每次子表单修改之后兄弟表单也会同步到数据。
"#自定义组件的 v-model - 自定义事件 —
Vue.js" (https://link.segmentfault.com/?enc=UN%2B2620bvIh0Iole3lJ1Kg%3D%3D.59n5LbbaEuA21wwgrVrhlC%2FC8m6OOitZAJvOMJ1%2BVJas4V0RHYuOtKWPBHDAs9znnL7GfCbS%2Ffhv1Ggr2TUrCy%2BgGpUSOoOosocsag9FYaQ7cFrW6wvO12xPKvDaw4AssHpl3NUln9XcOqTe10QVK51eONXNQD4KXryRfNc4NWg%3D)
***
当然如果不需要子组件之间的数据同步，也可以简单的在子组件写 "promisify" 的校验函数，在父级通过 "$refs.xx.onValid()"
来调用并且返回表单结果。多个子组件用 "Promise.all()" 来包裹，所有的校验函数都通过则继续执行。
onSubmit() {
Promise.all([
this.$refs.compA.onValid(),
this.$refs.compB.onValid()
]).then(([dataA, dataB]) => {
...
}).catch(err => {
...
})
}
***
当然如果你是使用 "AntD Vue" 这样的UI组件库，也可以尝试直接在父级使用 "a-form" 在子组件直接使用 "a-form-item"，这样在父级触发数据收集的时候也可以直接获取到子组件的内容。
我在 "AntD4Vue 1.x" 的版本有尝试过，现在的 "3x" 和 "4x" 不清楚是否依然可以这样处理。
"笔记 - AntD of Vue 中 表单域组件化使用的尝试" (https://link.segmentfault.com/?enc=1PnG1P1LWaqN7oDVrQnk4Q%3D%3D.Ir6UxGtRQWh9sZ%2Fl7kG%2BE1jl1uUdbqTnOgUmUfIiuK%2BVnDobmC%2FFavuSX9Ou5v1y3lX9LaD7QPUIg1Kis2vPiQ%3D%3D)