gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
阅读:4006回复:1

vue通过props方式在子组件中获取相应的对象

楼主#
更多 发布于:2021-01-10 21:51
这些方法主要是在这次做项目的过程中发现总结的来的,感觉也挺常用的,所以就简单的记录一下,希望下次不会再犯同样的错误。
子组件定义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就是一个数组。

在这四种方法的逐级使用下,终于获取到了我想要的data。
其实其他几种都是可以的,只是不知道为什么在这次项目中的某个地方,前面几种都失效了,(其他地方是成功的)。
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
沙发#
发布于:2021-01-10 21:51
游客


返回顶部