Interaction between components?

Question

Vue.js

Hello!
Once again I want to raise the issue of the connection of components on a specific example, because. until you can figure it out on your own.
There is a completely banal example:

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

Above, the parent component that contains the mobile menu: "Component", which should be styled when the button is clicked: "Button".
Next, the Component itself:

<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>

On a click outside the component, the component opens; on a click inside the component, it closes.
I would be grateful for a "popular explanation" of how to organize the connection between the "Open" button and the component in such a case.

Answer 1

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