Question

我想在子组件上使用手表作为道具，但是它不起作用。

这是我的代码：

props: {
    searchStore: {
        type: Object
    }
},
watch: {
    searchStore(newValue) {
        alert('yolo')
        console.log(newValue)
    }

不幸的是，它不起作用

我看了这篇文章，尝试了所有方法，但无济于事：VueJs 2.0 - how to listen for `props` changes

我用Vue Devtools检查了道具，并且正在改变。

提前感谢社区！

Answer 1

基于该代码，它应该有效，因此问题可能出在其他地方。您可以发布更多代码吗？

如果要立即运行，可以使用immediate。这是语法：

  watch: {
    searchStore: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {

      }
    }
  },

deep: true设置将深入监视对象内的变化。

在父组件中更新此对象的某些部分时，请确保使用Vue的$set函数。

this.$set(this.searchStore, 'myKey', {price: 12.22});

更多阅读：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Answer 2

'searchStore'不会改变吗？

由于vue是对象，因此它正在监视要传递的对象的新引用。

含义（不会触发观看）：

roorSearchStore.a = newVal

将不会触发手表（因为参考未更改）。

您可以像丹尼尔（Daniel）所说的那样深入观察或像这样做Object.assign：

rootSearchStore = Object.assign（{}，roorSearchStore，{a：newVal}）。

或者尝试观看rootSearchStore中更改的时间戳。

在vuejs上观看道具更改

2 个答案: