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。

其實其他幾種都是可以的，只是不知道為什么在這次項目中的某個地方，前面幾種都失效了，（其他地方是成功的），可能是因為我有毒吧 ╭(╯ε╰)╮。