码迷,mamicode.com
首页 > 其他好文 > 详细

vue通过props方式在子组件中获取相应的对象(深拷贝)

时间:2020-02-27 19:24:47      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:定时   监听   简单的   pre   his   toolbar   vda   type   就是   

这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的记录一下,希望下次不会再犯同样的错误。

子组件定义props,父组件传入数据,子组件在js中获取的时候使用,如果是在html里面,可以直接把变量渲染上去。子组件获取不到值时需要深拷贝

我就直接从代码上面来进行

 

js代码:

技术图片
//子组件中,定义传入的变量的类型等  
props: {
    data: {
      type: Array,
      require: true
    },
    status: {
      type: Boolean,
      require: false
    }
  }
技术图片

我们可以直接在生命周期函数里面打印props

mounted(){
  let _this=this;
  console.log(_this._props,9999);          
}

技术图片

 

方法一:

所以就可以直接拿取

mounted() {
     let _this=this;
     let {datas,status}=_this._props;
     console.log(datas,999999);
   },

 

方法二:

有时候会获取不到,这时候可以用一个定时器来获取

技术图片
   mounted() {
     let _this=this;
     let {datas,status}=_this._props;
     setTimeout(()=>{
       console.log(this._props)
       console.log(datas,111111)
     },2000)
   }
技术图片

 

方法三:

深拷贝

   mounted() {
     let _this=this;
      let props = {..._this._props};
      console.log(props,"props.......")
   },

 

方法四:

利用watch监听

//直接监听data,因为这里的props的变量名为data   
watch:{
     data(newData,prevData){
       console.log(newData,123654789)
     }
   }

 

技术图片

没错啊,我的data就是一个数组。

 本文原作者路径:https://www.cnblogs.com/epines/p/9518745.html

 

vue通过props方式在子组件中获取相应的对象(深拷贝)

标签:定时   监听   简单的   pre   his   toolbar   vda   type   就是   

原文地址:https://www.cnblogs.com/wssdx/p/12373645.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!