Как структурировать форму с повторно используемыми компонентами при сохранении надлежащего управления валидацией? ⇐ Javascript

[Anonymous]

Описание:
Я работаю над проектом Vue/Nuxt, где мы обычно создаем один компонент, который обрабатывает все входы, их состояние, проверку и подчинение API. /p>
Хотя этот подход работает, он часто приводит к крупным компонентам с сотнями строк кода из -за сложных правил проверки и бизнес -логики. < /p>
Я Учитывая более модульный подход, где каждый вход является независимым компонентом, например, < /p>







// check if every required inputs aren't emty
if(!data1 || !data2 || !data3 || !data4) return
< /code>
Pros этого подхода: < /strong> < /p>

[*] Каждый вход управляет своим собственным состоянием и ошибками .
[*] Поле издает его значение только в том случае, если оно верно.
меньше, более многоразовые компоненты. < /li>
< /ul>
минусы: < /strong> < /p>

Более сложная координация между родительскими и дочерними компонентами (например, как обеспечить действительные все поля?). < /li>
Увеличение количества событий и Логика синхронизации. < /li>
Потенциальная сложность, если необходима проверка поперечного поля. < /li>
< /ul>
С другой стороны, a Централизованный подход: < /p>

Предоставляет единый способ обработки проверки и ошибок. < /li>
сохраняет все деловые правила в одном место.
упрощает логику отправки.

приводит к раздутой, труднодоступной компоненту.
< /ul>
Вопрос: < /strong>
Каковы лучшие практики для обработки этого в Vue /nuxt?
Должны ли мы Выполните модульный подход с независимыми входом или централизованным подходом с главной формой?
Вы столкнулись с аналогичными проблемами, и как вы их решаете?>

Подробнее здесь: https://stackoverflow.com/questions/794 ... per-valida