美文网首页
Vue 父组件获取数据数据,子组件第一次props获取不到(使用

Vue 父组件获取数据数据,子组件第一次props获取不到(使用

作者: 上海老宅男 | 来源:发表于2020-06-18 17:54 被阅读0次

    大家都知道,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获取不到(使用

          本文链接:https://www.haomeiwen.com/subject/jnzuxktx.html