Как передать состояние компонента в дочерний vue?

Question

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

Здравствуйте! Делаю серьезный проект на vue первый раз, так что простите если вопрос крайне туп. Есть такая структура компонентов
TheHeader.vue --> HeaderLogOrReg.vue - здесь нужно отлавливать клик и передавать булево значение в другой компонент который находятся в такой структуре.
App -> Modal - в модалке надо принять состояние с HeaderLogOrReg

Comments

[Владимир Проскурин]

Не вставляйте код картинкой. Есть соответствующий тег. А еще лучше, оформляйте его в песочнице https://codesandbox.io/ jsfiddle.net или codepen

[Модератор]

3. В процессе создания вопроса пользователь Сервиса обязан:
3.8. Использовать для демонстрации фрагментов кода только специальный тег < code> или специальные демонстрационные ресурсы (например, JsFiddle - https://jsfiddle.net/). Размещение фрагментов кода в виде изображений запрещено.

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

Владимир Проскурин, Хорошо.

Answer 1

[nvdfxx]

https://codepen.io/nvdfxx/pen/qwRbOY?editors=1111
А вообще, если

Делаю серьезный проект

, то как-то странно базовых вещей не знать, да и для серьезного проекта event bus или стор обычно юзают вроде, выж не только из одного компонента будете модалку открывать скорее всего

Comments

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

Я согласен, мне грубо говоря выкатили проект сказали: Вот изучай)

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

https://codepen.io/AlexWebDojo/pen/wZgBZg а если нужно более вложенную структуру сделать?

[nvdfxx]

Александр Жуков, так и пробрасывайте эмиты до нужного родительского компонента. В компоненте the-header-reg по клику эмитится событие, которое отлавливает компонент the-header и эмитит уже свой эмит, который теперь ловим в следующем родительском компоненте и т.д., пока до нужного не дойдем. Опять же, для таких ситуаций придумали vuex, настоятельно рекомендую в его сторону посмотреть

[nvdfxx]

еще в последнем обновлении vue добавили observable, так что, если ничего больше не планируется в хранилище держать, кроме переменной, ответственной за открытие модалки (а это не так), то можно отказаться от vuex

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

nvdfxx, я думал использовать vuex для этого, но думал что это слишком большое нагромождение для модалки. Разве не так ?

[nvdfxx]

Александр Жуков, да, так и есть, но у вас, скорее всего, не только для модалки данные нужно будет глобально хранить, а, если так, то мой коммент выше про observable вам в помощь

Answer 2

[McBernar]

https://ru.vuejs.org/v2/guide/components-props.html

Comments

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

https://codepen.io/AlexWebDojo/pen/wZgBZg

Вот с такой структурой как мне передать состояние, можете подсказать ?