Get data from parrent component - vue.js

Question

I have 2 components:
header.vue
nav.vue
In header i have button, when i click, in nav change class. But i cant get parent component :( How to do this?
index.pug:
.g#global
frameheader
.frame
navigation(:navhidden="hiddenNav", :mobileaside="asideMobile", :links=navJson)
.frame__content
block content
main.js:
import navigation from '../vue/components/nav.vue';
import frameheader from '../vue/components/frameheader.vue';
Vue.component("navigation", navigation);
Vue.component("frameheader", frameheader);
Vue.use(VueCookie);
var global = new Vue({
el: "#global",
data() {
return {
hiddenNav: false,
asideMobile: false
}
}
})
Header.vue:
In header i have two buttons, who need to change data hiddenNav and asideMobile in main.js
<template lang="pug">
header.header
.header__left(:class="{'hidden-aside': this.$root.$emit(hiddenNav)}")
a.header__logo(href="")
img(src="img/logo_smart.png", alt="")
button.header__nav(#click="hiddenNav = !hiddenNav")
span
button.header__nav.header__nav_mobile(#click="asideMobile = !asideMobile" :class="{'active': asideMobile}")
span
</template>
<script>
import VueSlideUpDown from 'vue-slide-up-down'
export default {
name: 'frameheader',
data() {
return {
active: null,
val: false
}
},
methods: {
changeMenuType() {
this.$root.$emit(hiddenNav, true);
}
}
}
</script>
Nav.vue:
In .frame__aside i try to read parrent data drom main.js, but its not work (
<template lang="pug">
.frame__aside( :class="{'hidden-aside': navhidden, 'active': mobileaside }")
</template>
<script>
import VueSlideUpDown from 'vue-slide-up-down'
export default {
name: 'navigation',
data() {
return {
active: null,
val: false
}
},
props: {
navhidden: {
type: Boolean,
default: false
},
mobileaside: {
type: Boolean,
default: false
}
}
}
</script>

Answer 1

The way to accomplish what you want is to take advantage of Vue's custom events.
In your #global template, we need to add listeners for toggle-hidden-nav and toggle-mobile-aside:
#global.g
frameheader(#toggle-hidden-nav='hiddenNav = !hiddenNav', #toggle-aside-mobile='asideMobile = !asideMobile', :hidden-nav='hiddenNav', :mobile-aside='asideMobile')
.frame
navigation(:nav-hidden='hiddenNav', :mobile-aside='asideMobile')
.frame__content
NOTE: I've also updated props and events to use kebab case per the Vue docs (see here and here).
In your header component, we need to
$emit the custom events when the buttons are clicked
Pass hiddenNav and asideMobile as props (for :class binding)
<template lang="pug">
header.header
.header__left(:class="{'hidden-aside': hiddenNav}")
a.header__logo(href='')
img(src='img/logo_smart.png', alt='')
button.header__nav(#click="$emit('toggle-hidden-nav')")
span
button.header__nav.header__nav_mobile(#click="$emit('toggle-aside-moble')", :class="{'active': mobileAside}")
span
</template>
<script>
export default {
...
props: {
hiddenNav: {
type: Boolean,
default: false
},
mobileAside: {
type: Boolean,
default: false
}
},
...
}
</script>
Finally, I'd fix your the class bindings in the nav component as well:
<template lang="pug">
.frame__aside( :class="{'hidden-aside': navHidden, 'active': mobileAside }")
</template>