[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖

Question

我正在学习vuejs，但找不到正确的答案。当我单击“编辑年龄”按钮或更改“我的姓名”按钮时，出现以下错误。

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“ myName”

[Vue警告]：避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。变异的道具：“ userAge”

代码在这里。

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

Answer 1

很明显，您正在尝试直接更改props属性。

例如：

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

并在父组件上侦听该事件以更改您传递的道具：

<child-component :name="name" @name-updated="name = $event" />

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

<child-component :name.sync="name" />

以及子组件上的方法：

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

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