Vue 父组件获取数据数据,子组件第一次props获取不到(使用深度监听)

大家都知道,Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

//监听事件
  watch: {
    header:{
      deep: true, // 深度监听
      immediate: true, // 监听到后,立即执行 handler方法
      handler (val) {
        this.tableHeader = val
        this.$nextTick(()=>{
          this.$refs.GeneralTable.doLayout()
        })
      }
    }
  }

监听对象下某个属性--代码如下:

 data () {
      return {
        obj:{
          name:'夜空中最亮的星星',
          age:18
        }
      }
    },
    watch:{
      'obj.name':{
        deep:true,
        handler:function(newV,oldV){
          console.log('watch中:',newV)
        }
      }
    }

利用computed配合watch实现单个属性的深度监听;

 data () {
      return {
        obj:{
          name:'夜空中最亮的星星',
          age:18
        }
      }
    },
    computed:{
        name(){
            return this.obj.name;
        }      
    },
    watch:{
      'obj.name':{
        deep:true,
        handler:function(newV,oldV){
          console.log('watch中:',newV)
        }
      }
    }

你可能感兴趣的:(Vue 父组件获取数据数据,子组件第一次props获取不到(使用深度监听))