vue.js - 如何解决避免直接改变 prop，因为该值将被覆盖

Question

我已经看到了很多问题和答案，但它们并没有解决我的问题，我只是试图显示/隐藏当我单击父组件菜单按钮时抽屉应该打开，首次加载后它可以工作很好，但是当我关闭它时，它会显示这个错误。我只想在 props 中传递 true 或 false

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "drawer"

这就是我正在尝试做的事情。

在父级中

<template>
    <div @click="drawer = true" class="hamburger">
       <span></span>
       <span></span>
       <span></span>
    </div>

   <mobile-drawer-menu :drawer="drawer"/>
</template>

<script>
   import MobileDrawerMenu from "./MobileDrawerMenu";

   export default {
     components : {
        MobileDrawerMenu
    },

     data() {
        return {
            drawer : false,
        }
     },

   }
</script>

child

<template>
    <div v-if="drawer" class="fixed top-0 left-0 z-200">
        <div @click="drawer = false" class="overlay"></div>
        <div class="drawer-wrapper">
            <div class="drawer-close">
               <div class="flex items-center justify-end">
                  <svg @click="drawer = false"></svg>
               </div>
            </div>
        </div>
    </div>                     
</template>

<script>
   export default {
      name: "MobileDrawerMenu",
      props : {
        drawer : {
            type : Boolean,
            required : true
        }
     },
   }
</script>

Answer 1

您可以使用.sync modifier ，并使用 $emit 更新 prop:

<template>
    <div @click="drawer = true" class="hamburger">
       <span></span>
       <span></span>
       <span></span>
    </div>

   <mobile-drawer-menu :drawer.sync="drawer"/>
</template>

<script>
   import MobileDrawerMenu from "./MobileDrawerMenu";

   export default {
     components : {
        MobileDrawerMenu
    },

     data() {
        return {
            drawer : false,
        }
     },

   }
</script>

child

<template>
    <div v-if="drawer" class="fixed top-0 left-0 z-200">
        <div @click="$emit('update:drawer', false)" class="overlay"></div>
        <div class="drawer-wrapper">
            <div class="drawer-close">
               <div class="flex items-center justify-end">
                  <svg @click="$emit('update:drawer', false)"></svg>
               </div>
            </div>
        </div>
    </div>                     
</template>

<script>
   export default {
      name: "MobileDrawerMenu",
      props : {
        drawer : {
            type : Boolean,
            required : true
        }
     },
   }
</script>

JsFiddle:https://jsfiddle.net/hansfelix50/176oba9n/