Question

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

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

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

代码在这里。

https://codesandbox.io/s/k2197nr4o3

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

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 Event Bus或Vuex

Answer 2

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

在您的模板中：

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

在您的脚本中：

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

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

2 个答案: