Решение, которое вы предоставили, не является правильным способом. Вы не должны изменять реквизиты напрямую. Используя v-модель = "ящик", вы привязываете реквизиты. Вы получите предупреждение в консоли при запуске vue.js в режиме разработки.

ользую vuetify.js и пытаюсь создать компонент, который можно повторно использовать в приложении. Хотя это работает абсолютно нормально, но я не уверен, что это правильный путь.

Я создаю компонент навигационной панели, в котором все время одни и те же пункты меню, но его можно открыть из элементов пользовательского интерфейса.

Ниже приведен код.

// 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>

В приведенном выше коде ..

В родительском компоненте у меня есть кнопка, чтобы открыть навигационный ящик, и состояние навигационного ящика поддерживается в родительском компоненте, называемом «ящик». Затем я передаю «ящик» в качестве подпорки дочернему компоненту и метод для запуска события из дочернего компонента в родительский компонент с именем «emitToggleDrawer».

В дочернем компоненте я использую vuetify.js навигационный ящик, который принимает v-model = "boxFlag", где knifeFlag - вычисляемое свойство. Когда я пытался использовать v-модель = "ящик", то есть привязку к опоре, я получал ошибку. Затем мы можем закрыть навигационную панель, щелкнув элемент внутри навигационной панели. Чтобы добиться этого, я вызываю метод компонента, который в дальнейшем генерирует событие, которое прослушивается родительским компонентом.

 Arpit26 сент. 2017 г., 12:56
Когда вы определяете 'knifeFlag' в данных, он устанавливается только для начального времени. При изменении «ящика» из родительского он не отражается в свойстве data.
 Kumar_1426 сент. 2017 г., 11:54
поэтому он может автоматически присоединять методы получения и установки
 Kumar_1426 сент. 2017 г., 11:24
почему вы переопределяете «выдвижной ящик» как «выдвижной ящик», потому что он уже зарегистрирован в Home.vue data (), и вы предоставляете его как подпорку для компонента, вы не можете напрямую получить к нему доступ как «выдвижной ящик»?
 Kumar_1426 сент. 2017 г., 11:54
так что другой подход заключается в том, что в NavigationBar.vue вы можете определить в поле dataFlag параметр data () также rt?
 Arpit26 сент. 2017 г., 11:42
Проблема заключается в дочернем компоненте, когда мы пытаемся использовать v-модель = "выдвижной ящик", тогда он выдает ошибку, в которой говорится: «Избегайте прямого изменения объекта, поскольку значение будет перезаписываться всякий раз, когда родительский компонент перерисовывается. Вместо этого используйте данные или вычисленное свойство, основанное на значении реквизита. Мутирует реквизит: "ящик" ".

Ответы на вопрос(2)

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" на пользовательском компоненте ящика, чтобы он мог правильно работать на всех размерах экрана.

Таким образом, нам нужно как-то изменить его значение от родительского (или родного), поэтому я используюссылка на компоненте ящика. Может быть, вместо изменения$refs.drawer.drawer Данные я мог бы вызывать функции ящиков вместо. Я не уверен, что будет лучше. Но это было единственное простое решение, которое работало для меня на всех размерах экрана.

Так что в моем случае я изменяю состояние ящика только из заголовка, но я думаю, что вы можете использовать это и соответствовать вашим потребностям.

Используя толькоdrawer Вместо того, чтобы использоватьdrawer а такжеdrawerFlagБез дополнительной кнопки на дочернем компонентеБез излученияevent от ребенка к родителюС помощьюwatch в дочернем компоненте

Home.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>

NavigationBar.vue

<template>
  <v-navigation-drawer
    temporary
    v-model="drawer"
    light
    overflow
    fixed
  >
    <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' },
        ]
      };
    },
    watch: {
       drawer (value) {
          return value;
       }
    }
  }
</script>
 Arpit16 окт. 2017 г., 10:47
Решение, которое вы предоставили, не является правильным способом. Вы не должны изменять реквизиты напрямую. Используя v-модель = "ящик", вы привязываете реквизиты. Вы получите предупреждение в консоли при запуске vue.js в режиме разработки.

Ваш ответ на вопрос