[Vue warn]：避免直接变异道具

Question

如何解决此错误消息：

[Vue warn]：避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性。道具变异：“抽屉”

父组件：

<template>
  <div>
    <q-header bordered class="bg-grey-11">
      <q-toolbar>
        <q-btn

          @click="drawer = !drawer"

        />
        .....
    </q-header>

    <drawer-main :drawer="drawer"></drawer-main>
  </div>
</template>

<script>
import DrawerMain from "@/components/drawer/DrawerMain";
export default {
  props: ["miniState", "drawerClick"],
  components: {
    DrawerMain
  },
  data() {
    return {
      drawer: false
    };
  }
};
</script>

子组件：

<template>
  <q-drawer
    v-model="drawer"
    show-if-above
    :mini="!drawer || miniState"
    @click.capture="drawerClick"
  >

    <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
      <q-btn
        @click="miniState = true"
      />
    </div>
  </q-drawer>
</template>

<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
  props: ["drawer"],
  components: {
    DrawerNavigation
  },

  data() {
    return { miniState: false };
  },
  methods: {
    drawerClick(e) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
};
</script>

Answer 1

使用@Terry注释中提到的v-bin.sync或将prop值分配给数据属性。

<template>
  <q-drawer
    v-model="internalDrawer"
    show-if-above
    :mini="!internalDrawer|| miniState"
    @click.capture="drawerClick"
  >

    <div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
      <q-btn
        @click="miniState = true"
      />
    </div>
  </q-drawer>
</template>

<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
  props: ["drawer"],
  components: {
    DrawerNavigation
  },

  data() {
    return { 
      miniState: false 
      internalDrawer: this.drawer
    };
  },
  methods: {
    drawerClick(e) {
      if (this.miniState) {
        this.miniState = false;
        e.stopPropagation();
      }
    }
  }
};
</script>