Изучаю фреймворк vuejs, с ним в комплекте стоят vuex, vue-router, vuetify.
Главный компонент имеет такой код:
Main.vue<template>
<v-app>
<Header/>
<Sidebar/>
<v-content>
<v-container fluid>
<v-fade-transition mode="out-in">
<router-view></router-view>
</v-fade-transition>
</v-container>
</v-content>
</v-app>
</template>
<script>
import Header from './Header.vue';
import Sidebar from './Sidebar.vue';
export default {
name: 'main-app',
components: {Header,Sidebar}
}
</script>
<style>
@import url('https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css');
</style>
И остальные:
Header<template>
<v-toolbar
app
dark
clippedLeft
color="#000000ef"
>
<v-toolbar-side-icon>
<v-icon icon @click="toggleDrawer">menu</v-icon>
</v-toolbar-side-icon>
<v-toolbar-title>Nova app</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon><v-icon>search</v-icon></v-btn>
<v-toolbar-items class="hidden-sm-and-down">
</v-toolbar-items>
</v-toolbar>
</template>
<script>
export default {
name: 'app-header',
mounted() {
},
methods: {
toggleDrawer() {
drawer = !drawer //Здесь нужен доступ к свойству
}
}
// methods: {
// logout() {
// this.$store.commit('logout');
// this.$router.push('/login');
// }
// },
// computed: {
// currentUser() {
// return this.$store.getters.currentUser
// }
// }
}
</script>
Sidebar<template>
<v-navigation-drawer
v-model="drawer"
dark
clipped
hide-overlay
app
>
<v-toolbar flat class="transparent">
<v-list class="pa-0">
<v-list-tile avatar>
<v-list-tile-avatar>
<img src="https://randomuser.me/api/portraits/men/85.jpg">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>Dev</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-toolbar>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile v-for="item in items" :key="item.title" :to="item.link">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
name: 'app-sidebar',
data () {
return {
drawer: true,
items: [
{ title: 'Home', icon: 'dashboard', link:"/" },
{ title: 'Accounts', icon: 'supervisor_account', link:"/accounts" }
],
right: null
}
}
}
</script>
Как получить доступ к свойству drawer из компонента Sidebar в компоненте Header и изменить его?
Была мысль вывести его в главном компоненте и пользоваться им в компонентах где это нужно, но я не уверен в правильности этого подхода.
