如何将Vuetify的v-navigation-drawer、工具栏、页脚拆分为独立文件使用

Great call splitting these components—it’ll make your code cleaner, more maintainable, and easier to tweak later! Let’s walk through exactly how to set this up properly.

1. Create the TopNav Component (src/components/TopNav.vue) #

This will hold your <v-toolbar>. We’ll set it up to accept the drawer and clipped props, and emit an event to toggle the drawer state when the menu button is clicked.

<template>
  <v-toolbar
    app
    :clipped-left="clipped"
    color="primary"
    dark
  >
    <v-app-bar-nav-icon @click="toggleDrawer"></v-app-bar-nav-icon>
    <v-toolbar-title>My App</v-toolbar-title>
    <!-- Add any other toolbar items here (search, user menu, etc.) -->
  </v-toolbar>
</template>

<script>
export default {
  name: 'TopNav',
  props: {
    drawer: {
      type: Boolean,
      required: true
    },
    clipped: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleDrawer() {
      this.$emit('toggle-drawer');
    }
  }
}
</script>

2. Create the SideBar Component (src/components/SideBar.vue) #

This will contain your <v-navigation-drawer>. We’ll bind the drawer prop to control its visibility, and add example navigation links to get you started.

<template>
  <v-navigation-drawer
    v-model="drawerLocal"
    app
    clipped
    color="primary"
    dark
  >
    <v-list>
      <v-list-item router to="/">
        <v-list-item-icon>
          <v-icon>mdi-home</v-icon>
        </v-list-item-icon>
        <v-list-item-title>Home</v-list-item-title>
      </v-list-item>
      <v-list-item router to="/about">
        <v-list-item-icon>
          <v-icon>mdi-information</v-icon>
        </v-list-item-icon>
        <v-list-item-title>About</v-list-item-title>
      </v-list-item>
      <!-- Add more navigation items here -->
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'SideBar',
  props: {
    drawer: {
      type: Boolean,
      required: true
    }
  },
  // Two-way binding for the drawer state
  computed: {
    drawerLocal: {
      get() { return this.drawer; },
      set(value) { this.$emit('update:drawer', value); }
    }
  }
}
</script>

3. Create the FooterArea Component (src/components/FooterArea.vue) #

This is your <v-footer>—keep it simple with your app’s copyright info or other footer content.

<template>
  <v-footer
    app
    color="primary"
    dark
  >
    <v-container fluid>
      <span>&copy; {{ new Date().getFullYear() }} My Awesome App</span>
      <!-- Add other footer links or info here -->
    </v-container>
  </v-footer>
</template>

<script>
export default {
  name: 'FooterArea'
}
</script>

4. Update Your Layout.vue Component #

Now, we’ll import these components, register them, manage the drawer state, and wire up all the props/events to make everything work together.

<template>
  <v-app>
    <TopNav 
      :drawer="drawer" 
      :clipped="true" 
      @toggle-drawer="drawer = !drawer"
    ></TopNav>
    <SideBar 
      :drawer.sync="drawer"
    ></SideBar>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <FooterArea/>
  </v-app>
</template>

<script>
import TopNav from './components/TopNav.vue';
import SideBar from './components/SideBar.vue';
import FooterArea from './components/FooterArea.vue';

export default {
  name: 'Layout',
  components: {
    TopNav,
    SideBar,
    FooterArea
  },
  data() {
    return {
      drawer: false // Controls the navigation drawer visibility
    };
  }
}
</script>

Quick Key Notes: #

• Props & Events: We use props to pass state down from Layout to child components, and emit events to send state changes back up. The .sync modifier on the SideBar’s drawer prop simplifies handling the update event when the drawer is closed by clicking outside.
• Vuetify’s app Prop: Make sure each layout component (v-toolbar, v-navigation-drawer, v-footer) has the app prop—this tells Vuetify to position them correctly in the app’s fixed layout.
• Clipped Layout: The clipped prop ensures the toolbar overlaps the drawer, which is a clean, common Vuetify layout pattern.

That’s it! Now your layout is split into reusable components that are easy to maintain and modify separately.

内容的提问来源于stack exchange，提问作者User_4373