Question

我正在建立一个新项目，并想添加一个导航抽屉。当所有vuetify代码都存在于同一个.Vue文件中时，一切都会按预期进行。

但是，我希望对组件进行分解以使其易于维护。当我将工具栏和侧面导航分为单独的组件时，导航抽屉将停止工作。

我对Vue还是很陌生，我知道问题在于，抽屉变量需要从主要组件传递到布局组件。我已经设法使这部分工作了，但是我正在努力改变导航抽屉。

这是我当前的设置：

App.vue

<template>
  <v-app>
    <Header :drawer="drawer" />

    <v-layout row wrap fill-height>
      <SideNavigation :drawer="drawer" />

      <v-content>
        <router-view />
      </v-content>
    </v-layout>

    <Footer />
  </v-app>
</template>

<script>
import Footer from "./components/Layout/Footer";
import Header from "./components/Layout/Header";
import SideNavigation from "./components/Layout/SideNavigation";

export default {
  components: {
    Header,
    Footer,
    SideNavigation
  },
  data() {
    return {
      drawer: true
    };
  },
  name: "App"
};
</script>

Header.vue

<template>
  <v-toolbar color="white" app clipped-left>
    <v-toolbar-side-icon @click.stop="toggleDrawer"></v-toolbar-side-icon>
    <v-toolbar-title class="headline primary--text">
      <span>iHRIS Manage</span>
    </v-toolbar-title>
    <v-spacer></v-spacer>
    <span text-uppercase>Account</span>
  </v-toolbar>
</template>

<script>
import { serverBus } from "../../main";

export default {
  methods: {
    toggleDrawer: function() {
      serverBus.$emit("drawer", !this.drawer);
    }
  },
  props: {
    drawer: {
      type: Boolean,
      required: true
    }
  }
};
</script>

SideNavigation.vue

<template>
  <v-navigation-drawer
    v-model="drawer"
    app
    class="primary darken-1 white--text"
    clipped
  >
    <v-container centered class="px-1 text-uppercase font-weight-bold">
      <v-list class="primary darken-1 white--text font-weight-bold">
        <v-list-tile active-class="primary darken-2" href="/">
          <v-list-tile-avatar>
            <v-icon class="white--text">dashboard</v-icon>
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>
              <strong>Dashboard</strong>
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile active-class="primary darken-2" href="/settings">
          <v-list-tile-avatar>
            <v-icon class="white--text">settings</v-icon>
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title>
              <strong>Configuration</strong>
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-container>
  </v-navigation-drawer>
</template>

<script>
import { serverBus } from "../../main";

export default {
  created() {
    serverBus.$on("toggleDrawer", drawer => {
      this.drawer = drawer;
    });
  },
  data: function() {
    return {
      drawer: true
    };
  }
};
</script>

如您所见，我试图添加一个serverBus来传输我的数据。我的理论是，SideNavigation要么没有获取抽屉数据，要么没有以正确的格式获取它。我很好奇这里需要更改什么。

跨组件的导航抽屉

0 个答案: