What is the best way to break one large form into several parts?

Question

Vue.js

Hello colleagues!
I have one large form with several tabs on my project, and it would be logical to break each tab and separate it into its own component. But there are difficulties in how to do it.
What is:
There is a Data object - contains all the data to fill out the form.
There is a parent component where we forward this data . In the MainForm.vue template, it is done like this:
<main-form :data="data/>

<tabs>
<tab>
<part1-of-form :data="data"/>
</tab>
<tab>
<part2-of-form  :data="data"/>
</tab>
</tabs>
<button @click='onSave'>Save</button>

What I don’t like: I pass :data=“data” to each child component and this is not very good in my opinion (((
Problem: how to collect all the data from child components so that I can use them in the parent component in the onSave method?

Answer 1

You can write this.$root.$data in the child and change the corresponding parameters

Answer 2

I didn’t immediately figure out how to immediately regex the total length, and whether it will work, but it can be checked later.
regex101.com/r/wU7hV0/1