代码之家  ›  专栏  ›  技术社区  ›  foufrix

观看Vuejs上的道具更改

  •  5
  • foufrix  · 技术社区  · 6 年前

    我想用手表在一个儿童组件上做道具,但它不起作用。

    这是我的代码:

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

    不幸的是它没用

    我看了这篇文章,什么都试过了,什么都没用: VueJs 2.0 - how to listen for `props` changes

    我用vue devtools检查了我的道具,它正在变化。

    提前感谢社区!

    2 回复  |  直到 6 年前
        1
  •  10
  •   Daniel    6 年前

    基于那个代码,它 应该 工作,所以问题可能在别的地方。你能再发些代码吗?

    如果你想马上跑,你可以用 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

        2
  •  0
  •   Yaniv Peretz    6 年前

    可能是“搜索商店”没变吧?

    由于它是一个对象,Vue正在监视要传递的对象的新引用。

    意思是(不会触发监视):

    roorsearchstore.a=新瓦尔

    不会触发手表(因为引用未更改)。

    你可以像丹尼尔说的那样看得很深, 或执行object.assign,如下所示:

    rootSearchStore=object.assign({},roorSearchStore,{a:newval})。

    或者尝试查看rootsearchstore中更改的时间戳。