Question

我的组件中有一个Prop，它是一个User对象，然后有了这个功能：

    onChange: function(event){
        this.$v.$touch();
        if (!this.$v.$invalid) {
            this.$axios.put('update',{
                code:this.user.code,
                col:event.target.name,
                val:event.target.value  
            }).then(response => {
                this.user[event.target.name]=event.target.value
            });
        }
    }

我可以在Vue控制台调试器中看到正确的属性已更新，在创建组件时此属性存在，但是引用它的模板没有刷新：

<p>Hi {{user.nickname}}, you can edit your details here:</p>

这些都在同一个组件中，因此我不会导航到孩子或父母。我确定道具在代码中的其他地方都具有反应性吗？

Answer 1

好吧，看来这是故意的行为。根据文档 https://vuejs.org/v2/guide/components-props.html在我遇到的情况下应处理为：

该道具用于传递初始值；子组件随后希望将其用作本地数据属性。在这种情况下，最好定义一个使用prop作为其属性的本地数据属性初始值：
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

Answer 2

通常情况下，组件应该对Props具有反应性，尽管我在非反应性组件方面已有经验，所以我将prop添加到观察者并将函数调用放在那里。

props: ["myProp"],
watch:{
  myProp(){
     // ... your functions here
  }
}

为什么这个Vue道具对变化没有反应？

2 个答案: