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方式在子組件中獲取相應的對象”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。