[Vue警告]：避免直接变异prop，因为每当父组件重新呈现时，该值将被覆盖

Question

我正在学习vuejs，但我找不到合适的答案。当我点击编辑年龄按钮或更改我的名字按钮，我得到下面的错误。

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

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

代码在这里。

https://codesandbox.io/s/k2197nr4o3

请让我知道这个代码有什么问题。

Answer 1

改为使用计算值。例如，在您的UserEdit.vue：

在模板中：

<p>User Age: {{ computedUserAge }}</p>

在脚本中：

methods: {
    editAge() {
        this.computedUserAge = 30;
    }
},
computed: {
    computedUserAge: {
      get() {
        return this.userAge;
      },
      set(v) {
        this.$emit("ageWasEdited", v);
      }
    }
}

Answer 2

很明显，您正试图直接更改道具属性。

例如：

props: { name: 'something' }
methods: { 
 change_name(new_name) {
   this.name = new_name
 }
}

不建议这样做，这可能导致反应性不足。

作为解决方案，您可以使用父子通信。因此，每当您想要更改道具时，只需向父组件发出事件。所以上面的例子应该是：

props: { name: 'something' }
methods: { 
 change_name(new_name) {
   this.$emit('name-updated', new_name)
 }
}

在父组件上，监听该事件以更改您正在传递的道具：

或者我最喜欢的方法是使用.sync修饰符。因此父组件应该是：

以及子组件上的方法：

 change_name(new_name) {
   this.$emit('update:name', new_name)
 }

如果组件没有父子关系，请查看Vue.js事件总线或Vuex