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

Question

Александр Савенко @savenko

Php программист

Vue.js

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

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

Вопрос задан более трёх лет назад
98 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

Александр Савенко @savenko Автор вопроса
Вопрос: как связать данные в дочернем компоненте с родителем через this.$root.$data?
data={
userName: Anton,
lastName: Ivanov
}
Пример:
<input v-model="userName"/> <input v-model="lastName"/>

Т.е. что бы когда менялись данные у ребенка родитель об этом узнал?
Написано более трёх лет назад
Никита Егоров @svupol
В дочернем компоненте :
<input v-model='this.$root.$data.userName' /> <input v-model='this.$root.$data.lastName' />

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

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

Написано более трёх лет назад
Александр Савенко @savenko Автор вопроса

svupol, спасибо!

Написано более трёх лет назад