Question

我正在使用vuetify.js并尝试创建一个可以在整个应用程序中重用的组件。虽然它的工作非常好，但我不确定它是否正确。

我正在创建一个导航抽屉组件，它始终具有相同的菜单选项，但可以从UI元素中打开。

以下是代码。

// NavigationBar.vue

<template>
  <v-navigation-drawer
    temporary
    v-model="drawerFlag"
    light
    overflow
    fixed
  >
    <v-list>
      <v-list-tile>
        <v-list-tile-action @click.stop="toggleDrawer()">
          <v-btn icon>
            <v-icon>close</v-icon>
          </v-btn>
        </v-list-tile-action>
      </v-list-tile>
    </v-list>
    <v-list class="pt-0">
      <template v-for="item in items">
        <v-list-tile :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-divider></v-divider>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
  export default {
    props: ['drawer'],
    data() {
      return {
        items: [
          { title: 'Home', icon: 'home', link: '/home'},
          { title: 'History', icon: 'history', link: '/history' },
          { title: 'Wallet', icon: 'account_balance_wallet', link: '/wallet' },
          { title: 'My Profile', icon: 'person', link: '/profile' },
          { title: 'Settings', icon: 'settings', link: '/settings' },
          { title: 'About', icon: 'error', link: '/about' },
          { title: 'Logout', icon: 'power_settings_new', link: '/logout' },
        ]
      };
    },
    computed: {
      drawerFlag: {
        get: function() {
          return this.drawer
        },
        set: function() {

        }
      }
    },
    methods: {
      toggleDrawer: function() {
        this.$emit('emitToggleDrawer');
      }
    }
  }
</script>

// Home.vue

<template>
  <div class="full-screen">
    <navigation-bar :drawer="drawer" v-on:emitToggleDrawer="toggleDrawer"></navigation-bar>
    <v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer">
      <v-icon>menu</v-icon>
    </v-btn>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data() {
      return {
        drawer: null
      };
    },

    computed: {
      user() {
        return this.$store.getters.user;
      }

    },

    methods: {
      toggleDrawer: function () {
        this.drawer = !this.drawer;
      }
    }
  };
</script>

在上面的代码..

在父组件中，我有一个打开导航抽屉的按钮，导航抽屉的状态保存在名为＆＃34;抽屉＆＃34;的父组件中。然后，我正在经过＆＃34;抽屉＆＃34;作为子组件的prop和从子组件到父组件触发事件的方法，名为＆＃34; emitToggleDrawer＆＃34;。

在子组件中，我使用了vuetify.js navigation-drawer，它采用了v-model =＆＃34; drawerFlag＆＃34;，其中drawerFlag是一个计算属性。当我试图使用v-model =＆＃34;抽屉＆＃34;即绑定到道具我遇到了错误。然后我们可以通过单击导航抽屉内的元素来关闭导航抽屉。为了实现这一点，我正在调用一个组件的方法，该方法稍后会发出一个由父组件监听的事件。

Answer 1

我解决了这个问题：

App.vue

<my-drawer ref="drawer"></my-drawer>
<my-header @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></my-header>

MyDrawer.vue

<v-navigation-drawer v-model="drawer">
...
data() {
  drawer: true
}

MyHeader.vue

<v-toolbar-side-icon @click.stop="$emit('toggle-drawer')"></v-toolbar-side-icon>

<小时/> 在我看来，我们需要v-model="drawer"自定义抽屉组件，以便它可以适用于所有屏幕尺寸。

因此，我们需要以某种方式从父母（或兄弟姐妹）改变它的价值，这就是为什么我在抽屉组件上使用ref的原因。也许我可以改为调用抽屉功能，而不是改变$refs.drawer.drawer数据。我不确定什么是更好的方法。但这是唯一适用于所有屏幕尺寸的简单解决方案。

所以在我的情况下，我只是从标题更改抽屉状态，但我认为您可以根据需要使用它并适合。

Answer 2

我解决了类似下面的问题。

仅使用<?php echo $fetch_data; ?>而不是drawer和drawer
没有子组件上的额外按钮
不将drawerFlag从孩子发送到父母
在子组件中使用event

<强> Home.Vue

watch

<强> NavigationBar.vue

<template>
  <div class="full-screen">
    <navigation-bar :drawer="drawer"></navigation-bar>
    <v-btn icon class="mt-3 fixed-position" @click.stop="drawer = !drawer">
      <v-icon>menu</v-icon>
    </v-btn>
  </div>
</template>

<script>
  import NavigationBar from '@/components/NavigationBar';
  export default {
    name: 'home',
    data() {
      return {
        drawer: true
      };
    },
    components: {
      NavigationBar
    }
  }
</script>

试图将道具绑定到v-model

2 个答案: