Как взаимодействовать с состоянием одного компонента в другом?

Question

[Анастасия]

Всем привет
Я не так давно работаю с VueJs, но недавно у меня появился проект я которым я б хотела разобраться.

Есть два компонента:
Header.vue
Menu.vue



В компоненте Menu.vue есть кнопка "close right menu", при нажатии на которую, правое меню исчезает:
<button @click="menuShow = false">close</button>

data() {
    return {
      menuShow: true,
    };
  },

Как мне сделать в другом компоненте, то есть в Header.vue кнопку с возможностью открывать и закрывать это меню?
Я понимаю что мне как-то надо передавать данные о состоянии меню из одного компонента в другой?

Буду очень благодарна за ответ

Answer 1

[Aetae]

Для общего состояния всего приложения: vuex.
Для связки детей которые не могут жить без конкретного родителя с этим родителем: provide \ inject.
Для плотной связки единичных компонентов: отдельный Vue.observable \ Vue.reactive объект импортируемый в нужных компонентах.
Для явного взаимодействия рядомстоящих компонентов, обычный vue-flow: вверх события через $emit и @on, вниз props.

Comments

[Alex_mos]

А не подскажешь, я же правильно понимаю что provide/inject, observable/reactive это все используется во Vue3 или можно использовать и во 2

[Aetae]

Alex_mos, observable - vue 2, reactive - vue 3. provide/inject есть и там и там.)

[Alex_mos]

Aetae, понял, спасибо)

Answer 2

[Alex_mos]

вот можете ознакомиться как взаимодействовать между компонентами

Comments

[Aetae]

Шина событий - антипатерн в большинстве случаев.

[Alex_mos]

Aetae, честно говоря никогда эту возможность не рассматривал, хватало или emit или VUEX на все остальное, тем более мне почему то в нем удалось разобраться быстрее чем в redux))

[Aetae]

Alex_mos, потому что redux - переусложнён ради идиоматичности(никому кроме авторов не нужной). Vuex мог быть ещё лучше, если бы не копировал некоторые паттерны из redux.)

А шина событий иногда полезна: когда нужно следить именно за некими событиями, а не изменением данных.