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

Question

[Luxors]

Здравствуйте!
Ещё раз хочу поднять вопрос о связи компонентов на конкретном примере, т.к. самостоятельно разобраться пока не получается.
Есть абсолютно банальный пример:

<template>
	<header>
		<div>
			<app-logo />
			<button> Открыть </button> // Button
			<app-desktop-nav />
		</div>
		<app-mobile-nav /> // Component
	</header>
</template>

Выше, родительский компонент, в котором находится мобильное меню: "Component", на котором должны навешиваться стили при клике на кнопку: "Button".
Дальше, сам Conponent:

<template>
  <aside class="mob-menu" :class="{'mobile-nav--open' : visibleMobileNav}">
    <div class="mob-menu__body" >
      <button v-on:click="closeMobileNav">закрыть </button>
      <app-mobile-menu />
    </div>
  </aside>
</template>

<script>
import AppMobileMenu from './AppMobileMenu'

export default {
	components: { AppMobileMenu},
      data() {
		return {
			visibleMobileNav: false
		}
	},
  methods: {
    closeMobileNav() {
       this.visibleMobileNav = !this.visibleMobileNav
      }
    }
  }
}
</script>

По клику вне компонента, компонент открывается, по клику внутри компонента он закрывается.
Буду признателен, за "популярное объяснение", как организовать связь между кнопкой "Открыть" и компонентом в подобном случае.

Answer 1

[Павел Андрейченко]

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

Comments

[Luxors]

Да, вот это и не получается реализовать.