Нормально ли использовать компоненты обёртки?

Question

[Сергей Хлопов]

Здравствуйте, подскажите пожалуйста, у меня есть два компонента: form-category, vue-panel, они находятся на одном уровне, и мне хотелось бы что бы они общались между собой. Вкладывать в form-category компонент vue-panel не очень хочется т.к. компонент form-category уже достаточно большой. Поэтому сейчас сделал компонент обёртку form-wrapper-category для этих двух: form-category, vue-panel, что бы он обеспечивал общение между ними. Сейчас у меня такая структура:

подскажите пожалуйста нормальная ли это практика, или лучше как то по другом это сделать ? Просто я думаю о том что не усложняет ли это структуру и не добавляет ли лишнего кода по сути

Answer 1

[Дмитрий Макаров]

Vuex, Emitter

Comments

[Сергей Хлопов]

Благодарю вас

[Сергей Хлопов]

Начал использовать Vuex, ещё полностью не завершил реализацию, но вроде как всё должно получиться

Answer 2

[gian_tiaga]

Опишите как они должны общаться? Так сложно сказать на на ум больше приходит vuex нежели компонент обёртка, хотя задания не зная что-то сложно сказать

Comments

[Сергей Хлопов]

Компонент form-category - это форма добавления категорий
Компонент vue-panel - это панель боковая, которая должна открываться после клика на кнопку в компоненте form-category.
Затем в slot vue-panel я планирую добавить компонент ещё одни, в нём будет реализован функционал прикрепления подкатегорий. И те вот прикрепленные подкатегории мне нужно будет передавать в компонент form-category что бы уже form-category отправил это всё на сервер

[mrlag]

Сергей Хлопов,
Ну ок, у тебя данные хранятся в vue-category?
Чтобы не городить огород с пробросом пропсов. Ставь vuex.
И храни в state эти данные, также там сделай геттер.
А уже в компоненте form-category обращайся к этому геттеру

[Сергей Хлопов]

mrlag, Благодарю вас

Answer 3

[profesor08]

https://ru.vuejs.org/v2/guide/components-custom-ev...

вот так должны общаться они, друг о друге не зная.

Comments

[Сергей Хлопов]

Благодарю вас за ответ

Answer 4

[floydback]

У меня тоже была проблема с разрастанием компонента. Я пришёл к выводу, что архитектурно правильно разбивать все на мелкие и логически завершённые компоненты, даже если придётся заставлять их общаться через vuex или глобальные ивенты. Интересно, что думают другие

Comments

[Сергей Хлопов]

Понял, благодарю вас

Answer 5

[Денис Каримов]

А ViewCategoryCreate не может обеспечить общение между ними? Просто он, непосредственно, компонент роутинга, и априори должен быть сложным и умным. А отходящие от него компоненты глупые и отвечают только за визуальное построение.

Comments

[Сергей Хлопов]

Благодарю вас за ответ, да, я тоже думал про ViewCategoryCreate, но это компонент целиком страницы... я подумал что как то это не особо очевидным будет, хотя наверно можно попробовать

[Денис Каримов]

Сергей Хлопов, у меня на страницах "умный" всегда один корневой компонент, все остальные глупые, и умеют только принимать данные и emit'ить события. Давняя привычка еще с реакта.

Минусы. Хоть компонент и разгружается дочерними в плане отображения. Но может раздуться функционалом.

Плюсы. Если другой программист из команды начнет рыться в коде, он точно начнет с этого компонента и окажется прав. Ему не нужно будет искать место изменения данных в десятке дочерних компонентов.