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

【问题标题】：Why is this Vue prop not reacting to change?为什么这个 Vue 道具对变化没有反应？
【发布时间】：2019-08-17 01:28:54
【问题描述】：

我的组件中有一个 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>

这都在同一个组件中，所以我不会导航到子级或父级。我确定 props 在我的代码中的其他地方是被动的？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

通常组件应该对 Props 是反应性的，尽管我有过它是非反应性的经验，所以我将 prop 添加到 watcher 并将函数调用放在那里。

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

【讨论】：

问题是我试图让一个函数处理对象的任何变化。我在 User with Deep 上添加了手表，但是当我更改输入时它没有触发。不过这也很奇怪，所以肯定缺少一些东西。我将创建一个小提琴，看看我是否可以重新创建......
那么请在这里分享
是的，没有走那么远，在文档中发现了答案，所以现在已经发布了（我必须检查我的其余代码，以了解我认为它在哪里工作可能不可靠）

【解决方案2】：

好的，这似乎是预期的行为。根据文档 https://vuejs.org/v2/guide/components-props.html 在我有的情况下应该这样处理：

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

【讨论】：