Здравствуйте!
Ещё раз хочу поднять вопрос о связи компонентов на конкретном примере, т.к. самостоятельно разобраться пока не получается.
Есть абсолютно банальный пример:
<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>
По клику вне компонента, компонент открывается, по клику внутри компонента он закрывается.
Буду признателен, за "популярное объяснение", как организовать связь между кнопкой "Открыть" и компонентом в подобном случае.
