vue在mounted拿不到props中傳遞的數據怎么解決

這篇文章主要介紹“vue在mounted拿不到props中傳遞的數據怎么解決”，在日常操作中，相信很多人在vue在mounted拿不到props中傳遞的數據怎么解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue在mounted拿不到props中傳遞的數據怎么解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

vue mounted拿不到props中傳遞的數據

• 父組件向子組件傳遞參數

• 子組件使用props獲取

但是當子組件中代碼異步的時候，可能會出現created和mounted中取不到傳遞過來的參數的情況。

 export default {
    props: {
        courseDetail: {
            type: Object,
        },
    },
    data () {
        return {
        }
    },
    watch:{
    // 監聽對象中的某個值 也可以直接監聽某個對象
     'courseDetail.id'(newValue,oldValue){
     	// 異步方法
        this.getCommentList()
      }
    }
}

vue props傳值問題 created mounted watch

props 傳值在子組件定義props 關于mounted created獲取問題

export default{
props:["name"],
data(){
  return{
   data:this.name
   }
},
created(){
console.log(data); //  小明
console.log(this.name) //  小明
}，
mounted(){
console.log(data); //  小明
console.log(this.name) //  小明
}

當props是動態獲取的時候AJAX請求獲取的數據

你的 name里面的值并不是固定的，而是動態獲取的，這種情況下，你會發現 methods 中是取不到你的 chartData 的，或者取到的一直是默認值。

比如下面這個情況

父組件

<template>
<div id="app">
    <Child :name="data"></Child>
</div>
</template>
export default{
props:["name"],
data(){
  return{
   data:[]
   }
},
mounted(){
this.getAddName();
},
methods:{
getAddName() {
    axios.post(api,{params}).then(res=>{
      this.data = res.data.name
    }).catch(err=>{
        consloe.log(err);
      })
    }
  }
}

子組件Child

export default{
props:["name"],
data(){
  return{
   data:[]
   }
},
created(){
console.log(this.name) // unidenfied  ajax異步獲取的值 
},
mounted(){
console.log(this.name) // unidenfied ajax異步獲取的值 
 }
}

解決動態獲取props取值傳值問題

這情況我是使用watch處理：

export default {
    props: ['name'],
        data(){
            return {
                data: []
            }
        },
        watch: {
            //正確給 cData 賦值的 方法
            name: function(newVal,oldVal){
                this.data = newVal;  //newVal即是name
                newVal && this.dataChild(); //newVal存在的話執行dataChild函數
            }
        },
        methods: {
            dataChild(){
                //執行其他邏輯
            }
        },　　　　　
        mounted() {
            //在created、mounted這樣的生命周期, 給 this.data賦值會失敗,錯誤賦值方法
            // this.data= this.name; 
        }
}

監聽 name 的值，當它由空轉變時就會觸發，這時候就能取到了，拿到值后要做的處理方法也需要在 watch 里面執行。

數據渲染問題

props 渲染時，直接使用 在DOM上使用{{name}}渲染

針對于動態渲染DOM的操作問題：使用this.n e x t T i c k ( ) / / 等 待 渲 染 t h i s . nextTick() //等待渲染 this.nextTick()//等待渲染this.nextTick()將回調延遲到下次 DOM 更新循環之后執行

export default {
    props: ['name'],
        data(){
            return {
                data: []
            }
        },
        watch: {
            //正確給 cData 賦值的 方法
            name: function(newVal,oldVal){
              if(newVal){ //當newVal 數據發生改變時
                this.$nexTick(()=>{ //等待newVal 數據渲染完成
                document.getElementById(ID).style.backgroundColor="#fffff";
                })
              }
            }
        },
        methods: {
            dataChild(){
                //執行其他邏輯
            }
        },　　　　　
        mounted() {
            //在created、mounted這樣的生命周期, 給 this.data賦值會失敗,錯誤賦值方法
            // this.data= this.name; 
        }
}

props總結

獲取不到props的原因：

因為父組件中要傳遞給子組件的 props 屬性 是通過 ajax請求獲取的， 請求的這個過程是需要時間的異步獲取等待返回，然而子組件的渲染要快于ajax請求過程，所以此時在created 、 mounted 只執行一次的生命鉤子函數中，執行完成后，此時 props 還沒有傳遞（子組件），所以只能獲取默認的props值，當props獲取ajax完成后傳遞進來，此時生命周期函數已經執行完成。所以wacth監聽數據變化來解決問題。

到此，關于“vue在mounted拿不到props中傳遞的數據怎么解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！