欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年04月20日 11:20:08   作者：epines  
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

這些方法主要是在這次做項(xiàng)目的過程中發(fā)現(xiàn)總結(jié)的來的，感覺也挺常用的，所以就簡單的記錄一下，希望下次不會(huì)再犯同樣的錯(cuò)誤。

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

我就直接從代碼上面來進(jìn)行

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);
? ?},

方法二

有時(shí)候會(huì)獲取不到,可以用一個(gè)定時(shí)器來獲取

? ?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，因?yàn)檫@里的props的變量名為data ??
watch:{
? ? ?data(newData,prevData){
? ? ? ?console.log(newData,123654789)
? ? ?}
? ?}

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

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

其實(shí)其他幾種都是可以的，只是不知道為什么在這次項(xiàng)目中的某個(gè)地方，前面幾種都失效了，（其他地方是成功的），可能是因?yàn)槲矣卸景?╭(╯ε╰)╮。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論