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

本文小编为大家详细介绍“vue怎么通过props方式在子组件中获取相应的对象”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue怎么通过props方式在子组件中获取相应的对象”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

子组件定义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。

读到这里，这篇“vue怎么通过props方式在子组件中获取相应的对象”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。