vue兄弟组件通信？

  • Z时代
  • 2024-02-22
  • 分类：IT

前提是在原来老代码的基础上，保证不影响其他功能。

一个页面多个表单组件来回切换，数据相互关联，怎么优雅的在父页面提交完整的数据，子组件的修改的数据，能够双向同步父组件？
在原代码基础上很容易扩充字段。

回答：

如果多个组件见有互相控制的，那么使用自定义组件的 v-model 规则改造子表单，然后在父级直接用 v-model 绑定就可以了。其实就是 props + $emit 的方式。每次子表单修改之后兄弟表单也会同步到数据。

#自定义组件的 v-model - 自定义事件 — Vue.js

当然如果不需要子组件之间的数据同步，也可以简单的在子组件写 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 中 <AForm> 表单域组件化使用的尝试

以上是 vue兄弟组件通信？ 的全部内容， 来源链接： utcz.com/p/935066.html

回到顶部