Как лучше разбить одну большую форму на несколько частей?

Question

[Александр Савенко]

Здравствуйте, Коллеги!
У меня на проекте есть одна большая форма с несколькими вкладками, и было бы логично каждую вкладку разбить и выделить в собственный компонент. Но есть трудности в том как это сделать.
Что есть:
Есть объект Data- содержит все данные для заполнения формы.
Есть родительский компонент куда мы пробрасываем эти данные

<main-form :data="data/>

В шаблоне MainForm.vue сделано так:

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

Что мне не нравится: В каждый дочерний компонент пробрасываю :data=“data” и это не очень хорошо на мой взгляд (((

Проблема: как собрать все данный из дочерних компонентов что бы потом в родительском компоненте в методе onSave использовать их?

Answer 1

[Никита Егоров]

Можно в дочернем написать this.$root.$data и менять соответствующие параметры

Comments

[Александр Савенко]

Вопрос: как связать данные в дочернем компоненте с родителем через this.$root.$data?
data={
userName: Anton,
lastName: Ivanov
}
Пример:

<input v-model="userName"/>
<input v-model="lastName"/>

Т.е. что бы когда менялись данные у ребенка родитель об этом узнал?

[Никита Егоров]

В дочернем компоненте :

<input v-model='this.$root.$data.userName' />
<input v-model='this.$root.$data.lastName' />

Это не реакт, не надо никакими специальными функциями информировать родителя об измененияx его данных в дочерних компонентах. Реактивная связанность сделает это за вас. Data у родителя изменится сама, как только изменится в "ребенке".

[Никита Егоров]

svupol, то есть связывать эти данные никак не надо. Достаточно только поместить <part1-of-form/> и <part2-of-form/> в родителя. Они сами реактивно свяжутся.

[Александр Савенко]

svupol, спасибо!