Как поменять стиль в компоненте в Vue.js при нажатии на элемент в другом компоненте?

Question

[Максим]

В первом компоненте есть ссылка при нажатии на которую к некоторым элемента добавляется или убирается класс

<a href="#" @click="showMobileMenu = !showMobileMenu">

как сделать так чтобы это класс применился к элементу из другого компонента:

<div class="asd" :class="{ active: showMobileMenu }" >

Answer 1

[Aetae]

Если этот компонент выше - $emit событие.
Если этот компонент ниже - через props.
Если эти компоненты широко разнесены, но всегда находятся логически в одном родителе - provide в родителе и inject в обоих комонентах.
Eсли они они связаны общей логикой - отдельный реактивный объект
Vue.observable/Vue.reactive и, соответственно, import в обоих компонентах.
И, наконец, если компоненты никак не связаны и таких ситуаций много - Vuex.)

Comments

[Максим]

Нужно передать этот клик из aside to asd то нужно provide/inject?

[Aetae]

Максим, не, в таком простом случае:
App:

data: {
  showMobileMenu: true
}

Aside:

<aside :show-mobile-menu.sync="showMobileMenu"/>
props: ['showMobileMenu'],
<button @click="$emit('update:showMobileMenu', !this.showMobileMenu)"/>

Asd:

<asd :show-mobile-menu="showMobileMenu"/>
props: ['showMobileMenu'],