javascript – 尝试将道具绑定到v-model

我正在使用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>

在上面的代码..

在父组件中,我有一个用于打开导航抽屉的按钮,导航抽屉的状态保存在名为“drawer”的父组件中.然后,我将“drawer”作为prop组件传递给子组件,并将一个事件从子组件触发到父组件,称为“emitToggleDrawer”.

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

解决方法:

我这样解决了：

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 =“抽屉”,以便它可以适用于所有屏幕尺寸.

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

所以在我的情况下,我只是从标题改变抽屉状态,但我认为你可以根据你的需要使用它.

标签：javascript,vue-js,vuejs2,vuetify-js
来源： https://codeday.me/bug/20190611/1216866.html