[Vue 警告]：避免直接改变 prop

Posted 2023-02-22

【中文标题】[Vue 警告]：避免直接改变 prop

【英文标题】：[Vue warn]: Avoid mutating a prop directly

【发布时间】：2020-09-11 19:22:17

【问题描述】：

如何解决此错误消息：

，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“抽屉”

父组件：

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

【问题讨论】：

您应该将v-model="drawer" 移动到父组件中，然后阅读本指南中有关如何将本机事件实现到子组件的内容：vuejs.org/v2/guide/…。或者，您可以使用v-bind.sync

它可以工作，但它不会一直切换抽屉。我正在使用类星体框架：quasar.dev/layout/drawer#Click-trigger

你能在代码沙箱中创建最小的例子吗？

【参考方案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>

【讨论】：

错误消失了，但是抽屉不能正常工作..当我点击父组件中的snackbar时，抽屉应该在DOM中是不可见的drawer#Click-trigger

它看起来不是最有效的，但您可以查看抽屉并使用相同的值更新 internalWatch

我已经发布了我的答案，我不确定你的意思是不是这样？但我还有一个问题需要解决..