在 VueJS 中发生变异的道具答案

【问题标题】：Props being mutated in VueJS在 VueJS 中发生变异的道具
【发布时间】：2020-10-16 13:35:33
【问题描述】：

我是 vue 新手，我遇到了这个错误，我不确定我是否正确传递了道具并在其他组件中很好地执行了它。我将详细解释我想要实现的目标。

我在此页面上单击时隐藏了一个组件，并在此处可互换地显示另一个元素。

我已经阅读了几个解决方案，但我不明白我究竟应该如何解决它

 <div v-if="hidden" class="orderSummary">
      <div class="orderSummary__container">
        <h2 class="orderSummary__header">Order Summary</h2>
 <button @click="showForm()" class="total__button">Continue</button>
 <PaymentForm v-if="!hidden" :hidden="hiddenMode" />
</div>
</div>

 methods: {
    showForm() {
      if (this.subTotal > 1) {
        this.hidden = false;
      }
    }
  },

现在在支付表单组件中，我需要隐藏该组件并让另一个组件也出现，我想通过传递道具来做到这一点。这是我的代码

 <div class="payForm">
      <div @click="hideForm()" class="PayForm__icon">
        <backIcon class="icon" />
        <span class="PayForm__icon-text">Go &nbsp; back</span>
      </div>
</div>

props: ["base_amount", "value_added_tax", "hiddenMode"],

methods: {
    submit() {
      const data = {
        name: this.name,
        
      };
      
    },

    hideForm() {
     this.hiddenMode = true;
    }
  },

我收到以下错误，我该怎么办

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: "hiddenMode"

【问题讨论】：

您可以向父级发送事件或在子级中使用computed 属性

标签： javascript vue.js

【解决方案1】：

不要让 hiddenMode 成为道具；通过数据将其设置为状态：

//parent
props: ["base_amount", "value_added_tax"],


data() {
   return {
        hiddenMode: false
   }
},
...

编辑：

您还应该将 hideForm() 移动到父组件，而是绑定到 PaymentForm 的 onlick：

@click="$emit('clicked')"

然后在父组件中将 hideForm 绑定到被点击的 emit：

<PaymentForm v-if="!hidden" :hidden="hiddenMode" @clicked="hideForm"/>

注意：$emit 不必称为“已点击”，您可以将其命名为任何名称

【讨论】：

我的“hideForm”功能是什么，我需要隐藏这个组件并显示在另一个页面上。
我明白你的意思，我更新了我的答案。您需要将 hiddenMode 和 hideForm 向上移动到父组件中，并在支付组件中使用 $emit。

【解决方案2】：

使用.sync 修饰符。这样子组件不会直接修改属性。所以父母会是

<PaymentForm v-if="!hidden" :hidden-mode.sync="hiddenMode" />

孩子会是

hideForm() {
  this.$emit('update:hiddenMode', true);
}

【讨论】：

【解决方案3】：

首先，这里有一个逻辑问题。如果 hidden 为 false，则第一个 DIV 和包括 PaymentForm 在内的子项不存在。如果 hidden 为真，则 PaymentForm 也不会显示，因为您有 <PaymentForm v-if="!hidden"

其次，你的 PaymentForm 有一个 hiddenMode 属性，你没有在父 vue 中设置它。你应该有:hiddenMode="hidden" 而不是:hidden="hiddenMode"

为你 hideForm 函数使用 $emit

  this.$emit('update:hiddenMode', true);

【讨论】：