Javascript [Vue warn]：避免直接变异道具，因为每当父组件重新渲染时，该值将被覆盖

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

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

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

代码在这里

---

请让我知道这段代码的错误。

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

例如：

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

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

或者我最喜欢的方法是使用修饰符。所以父组件应该是：

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

以及子组件上的方法：

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

---

如果组件没有父子关系，请查看或使用计算值。例如，在UserEdit.vue中：

在模板中：

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

---

我正在尝试这个解决方案，但没有得到正确的解决方案。请帮帮我。尝试了最后一种方法，但似乎仍然出现相同的错误。它工作正常，但由于某些原因，名称没有从新名称转移到事件。当我硬编码的时候，你知道为什么吗？