vue.js - 如何在不同文件中分别使用vuetify组件v-navigation-drawer、toolbar、footer

Question

我正在尝试实现 vuetify在我的项目中。我想分开 <v-navigation-drawer> , </v-toolbar>和 <v-footer>在三个不同的文件中。

目前我正在使用。

Layout.vue

<template>
  <v-app>
    <TopNav :drawer="drawer" :clipped="clipped"></TopNav>
        <SideBar/>
        <v-content>
            <v-container fluid>
                <router-view></router-view>
            </v-container>
        </v-content>
        <FooterArea/>
    </v-app>
</template>

Script-Layout.vue

<script>
import { TopNav, FooterArea, SideBar } from "../layouts/index";

export default {
  name: "Full",
  components: {
    TopNav,
    FooterArea,
    SideBar
  },
  data() {
    return {
      clipped: true,
      drawer: true,
      fixed: false,
      inset: true,
      items: [
        {
          icon: "bubble_chart",
          title: "Inspire"
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: "Vuetify.js"
    };
  }
};
</script>

TopNav.vue

<template>
      <v-toolbar dark color="info" app :clipped-left="clipped">
      <v-toolbar-side-icon  v-model="drawer" @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title class="white--text">Title</v-toolbar-title>
    </v-toolbar>
</template>
<script>
export default {
  props: {
    clipped: {
      type: Boolean,
      default: true
    },
    drawer: {
      type: Boolean,
      default: true
    }
  }
};
</script>

SideBar.vue

<template>
   <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      :clipped="clipped"
      v-model="drawer"
      enable-resize-watcher
      fixed
      app
      >
      <v-list>
         <v-list-tile
            value="true"
            v-for="(item, i) in items"
            :key="i"
            >
            <v-list-tile-action>
               <v-icon v-html="item.icon"></v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
               <v-list-tile-title v-text="item.title"></v-list-tile-title>
            </v-list-tile-content>
         </v-list-tile>
      </v-list>
   </v-navigation-drawer>
</template>
<script>
export default {

}
</script>

然而，我尝试使用 Prop 并将值从 Layout.vue 传递到 TopNav.vue，但我收到的错误如下:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "drawer"

因为我需要从 TopNav.vue 发出至 Layout.vue但我不明白如何才能很好地完成它。

提前感谢您的帮助。

Answer 1

我是这样使用的:

parent

<template>
  <v-app id="inspire">
    <TheNavDrawer :items="items" v-model="drawer" />

    <v-toolbar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      color="orange darken-3"
      dark
      app
      fixed
    >

      <v-toolbar-side-icon
        @click.stop="drawer = !drawer"
        class="hidden-xs-only"
      />
      
      <v-toolbar-title>Test App</v-toolbar-title>

    </v-toolbar>
  </v-app>
</template>

<script>
import TheNavDrawer from "@/components/Navigation/TheNavDrawer";


export default {
  data: () => ({
    drawer: false,
    items: [
      { icon: "contacts", text: "Contacts" },
      { icon: "history", text: "Frequently contacted" },
      { icon: "content_copy", text: "Duplicates" },
      {
        icon: "keyboard_arrow_up",
        "icon-alt": "keyboard_arrow_down",
        text: "Labels",
        model: true,
        children: [{ icon: "add", text: "Create label" }]
      },
      {
        icon: "keyboard_arrow_up",
        "icon-alt": "keyboard_arrow_down",
        text: "More",
        model: false,
        children: [
          { text: "Import" },
          { text: "Export" },
          { text: "Print" },
          { text: "Undo changes" },
          { text: "Other contacts" }
        ]
      },
      { icon: "settings", text: "Settings" },
      { icon: "chat_bubble", text: "Send feedback" },
      { icon: "help", text: "Help" },
      { icon: "phonelink", text: "App downloads" },
      { icon: "keyboard", text: "Go to the old version" }
    ]
  }),
  components: {
    TheNavDrawer,
  }
};
</script>

TheNavDrawer.vue

<template>
  <v-navigation-drawer
    v-bind:value="value" # <-- mimic v-model behaviour
    v-on:input="$emit('input', $event)" <-- mimic v-model behaviour
    :clipped="$vuetify.breakpoint.lgAndUp"
    fixed
    app
  >
    <v-list dense>
      <template v-for="item in items">
        <v-layout v-if="item.heading" :key="item.heading" row align-center>
          <v-flex xs6>
            <v-subheader v-if="item.heading">
              {{ item.heading }}
            </v-subheader>
          </v-flex>
          <v-flex xs6 class="text-xs-center">
            <a href="#!" class="body-2 black--text">EDIT</a>
          </v-flex>
        </v-layout>
        <v-list-group
          v-else-if="item.children"
          :key="item.text"
          v-model="item.model"
          :prepend-icon="item.model ? item.icon : item['icon-alt']"
          append-icon=""
        >
          <v-list-tile slot="activator">
            <v-list-tile-content>
              <v-list-tile-title>
                {{ item.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
          <v-list-tile
            v-for="(child, i) in item.children"
            :key="i"
            @click="false"
          >
            <v-list-tile-action v-if="child.icon">
              <v-icon>{{ child.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>
                {{ child.text }}
              </v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list-group>
        <v-list-tile v-else :key="item.text" @click="false">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>
              {{ item.text }}
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    value: {
      type: Boolean,
      default: false
    }
  }
};
</script>

基本上，我没有在 NavDrawer 子组件中使用 v-model，而是使用 v-bind:value="value"和 v-on:input="$emit('input', $event )"从 <v-navigation-drawer> 传播状态直到父组件，并使代码更清晰。如果您想了解更多关于幕后发生的事情，请看这里:https://v2.vuejs.org/v2/guide/components-custom-events.html