Vue - 监听道具变化（对象），观察不触发

Question

我有类似的问题： VueJs 2.0 - how to listen for `props` changes 但在我的例子中，我将对象从父对象发送到子对象，还传递了几次以使用 JS 中对象引用的好处。

有一个例子，但工作正常：

 <div id="app">
  <child :myprop="myObj"></child>
  <button @click="text = 'Another text'">Change text</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    myObj: {
       id: null
    }
  },
  components: {
    'child' : {
      template: `<div>
      <p>{{ myprop.id }}</p>
      <select v-model="myprop.id">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      </div>`,
      props: ['myprop'],
      watch: {
        'myprop.id': function(newVal, oldVal) { // watch it
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});
</script>

https://jsfiddle.net/8hqwg6Ln/

在我的例子中，我将 v-model on select 设置为“parentObj.id”，然后为此添加观察者。目标是在更改 id 后更改其他 parentObj 属性 - 用户选择 id，之后我在我的数组中搜索此 id 并设置 parentObj.price，它是与选择字段处于同一级别的其他组件（修改后的输入）的 v-model .

当我更改选择时，不会触发观察者。如果我用我的自定义方法添加@change，它可以工作，但有延迟（我在 vue 开发工具中看到这个，必须刷新才能获取当前数据），而且，它不适用于第二个输入组件 - 它没有看到更改 parentObj.price。

使用复杂集合传递和修改具有许多不同组件的这个集合的最佳方法是什么？我想，我可以将属性的“副本”添加到本地级别（因此，创建带有 id 和 price 的数据），添加观察者，并使用 this.$set 更新收到的道具。但是…这是个不错的选择吗，也许这里有更好的选择？

原文由 lukasamd 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这很容易。您需要添加深层属性来监视对象。

 props: ['myprop'],
  watch: {
    myprop: {
        deep: true,
        handler: function(newVal, oldVal){
           console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }

你不需要使用类似的东西

'myprop.id'

原文由 Станислав Кравчук 发布，翻译遵循 CC BY-SA 4.0 许可协议