@Mazino

Как получить доступ к свойствам внешних компонентов в Vue?

Изучаю фреймворк 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>

Как получить доступ к свойcтву drawer из компонента Sidebar в компоненте Header и изменить его?
Была мысль вывести его в главном компоненте и пользоваться им в компонентах где это нужно, но я не уверен в правильности этого подхода.
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
@Zewkin
Я у мамы фронтэндер
Так не делается. Используйте Vuex.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
от 90 000 до 220 000 руб.
от 60 000 до 90 000 руб.
16 июл. 2019, в 13:18
100 руб./за проект
16 июл. 2019, в 12:33
20000 руб./за проект
16 июл. 2019, в 12:18
5000 руб./за проект