javascript - 尝试将 Prop 绑定(bind)到 v-model

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>

//首页.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>

在上面的代码中..

在父组件中，我有打开抽屉导航的按钮，抽屉导航的状态在名为“抽屉”的父组件中维护。然后，我将“抽屉”作为 Prop 传递给子组件，并传递一种方法来触发从子组件到父组件的事件，称为“emitToggleDrawer”。

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

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 数据。我不确定什么是更好的方法。但这是唯一适用于所有屏幕尺寸的简单解决方案。

所以在我的例子中，我只从标题更改抽屉状态，但我认为您可以使用它并根据您的需要进行调整。