vue组件复杂通讯的解决办法

现有父组件A和子组件B,C,D,E, 每个子组件都有一个表单可以编辑,保存

现在需求是,在父组件A中添加一个提交按钮,点击后,将子组件B,C,D,E的表单都提交了,所有表单提交后再,执行一个A组件里的一个方法

 

解决办法如下:

1:在A组件里创建二个变量

haveFinish={B:false,C:false,D:false,E:false} 

startSubmit=1

2:将变量startSubmit传入到每个子组件里,并使用watch监听其改变,改变后执行 子组件的表单提交方法

3:在每个子组件上添加自定义事件,在表单提交服务器返回数据后触发

4:在父组件中接受子组件的自定义事件,并修改havaFinish中对应的值 如:B组件触发了自定义事件就将B改为true

5:当havaFinish中的值都为true时,表示 所有子组件表单都已提交,开始执行 父组件的方法

 

注,稍微修改一下 可以做成表单串行提交