vue怎么通過props方式在子組件中獲取相應(yīng)的對象

本文小編為大家詳細介紹“vue怎么通過props方式在子組件中獲取相應(yīng)的對象”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“vue怎么通過props方式在子組件中獲取相應(yīng)的對象”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

子組件定義props，父組件傳入數(shù)據(jù)，子組件在js中獲取的時候使用，如果是在html里面，可以直接把變量渲染上去。

我就直接從代碼上面來進行

js代碼：

//子組件中，定義傳入的變量的類型等  
props: {
    data: {
      type: Array,
      require: true
    },
    status: {
      type: Boolean,
      require: false
    }
  }

我們可以直接在生命周期函數(shù)里面打印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監(jiān)聽

//直接監(jiān)聽data，因為這里的props的變量名為data   
watch:{
     data(newData,prevData){
       console.log(newData,123654789)
     }
   }

沒錯啊，我的data就是一個數(shù)組。

在這四種方法的逐級使用下，終于獲取到了我想要的data。

讀到這里，這篇“vue怎么通過props方式在子組件中獲取相應(yīng)的對象”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。