相反，使用数据或基于 prop 值计算的属性。浏览器

Question

好吧，我试图在 Vue 中更改 "variable" 的值，但是当我单击按钮时，它们会在控制台中抛出一条消息：

[Vue warn]: 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: "menuOpen"

我不知道如何解决这个问题...

我的file.vue:

<template>
  <button v-on:click="changeValue()">ALTERAR</button>
</template>

<script>

export default {
  name: 'layout',
  props: [ 'menuOpen' ],
  methods: {
    changeValue: function () {
      this.menuOpen = !this.menuOpen
    }
  },
}

</script>

谁能帮帮我？谢谢

Answer 1

警告很清楚。在您的 changeValue 方法中，您正在更改属性、menuOpen 的值。这将更改组件内部的值，但是如果 parent 组件出于任何原因必须重新渲染，那么无论值是 inside该组件将被当前状态覆盖在组件之外。

通常，您可以通过复制值供内部使用来处理此问题。

export default {
  name: 'layout',
  props: [ 'menuOpen' ],
  data(){
      return {
          isOpen: this.menuOpen
      }
  },
  methods: {
    changeValue: function () {
      this.isOpen= !this.isOpen
    }
  },
}

如果您需要将值的更改反馈给父级，那么您应该$emit更改。

changeValue: function () {
    this.isOpen= !this.isOpen
    this.$emit('menu-open', this.isOpen)
}

相反，使用数据或基于 prop 值计算的属性。浏览器

Instead, use a data or computed property based on the prop's value. Vue JS

javascript

vue.js

vue-component

vuejs2

相反，使用数据或基于 prop 值计算的 属性。浏览器

Instead, use a data or computed property based on the prop's value. Vue JS

javascript

vue.js

vue-component

vuejs2

相反，使用数据或基于 prop 值计算的属性。浏览器