快捷導(dǎo)航

vue在mounted拿不到props中傳遞的數(shù)據(jù)問(wèn)題

更新時(shí)間：2023年03月24日 08:55:32 作者：老大oba

這篇文章主要介紹了vue在mounted拿不到props中傳遞的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue mounted拿不到props中傳遞的數(shù)據(jù)

父組件向子組件傳遞參數(shù)
子組件使用props獲取

但是當(dāng)子組件中代碼異步的時(shí)候，可能會(huì)出現(xiàn)created和mounted中取不到傳遞過(guò)來(lái)的參數(shù)的情況。

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

vue props傳值問(wèn)題 created mounted watch

props 傳值在子組件定義props 關(guān)于mounted created獲取問(wèn)題

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) // ?小明
}

當(dāng)props是動(dòng)態(tài)獲取的時(shí)候AJAX請(qǐng)求獲取的數(shù)據(jù)

你的 name里面的值并不是固定的，而是動(dòng)態(tài)獲取的，這種情況下，你會(huì)發(fā)現(xiàn) methods 中是取不到你的 chartData 的，或者取到的一直是默認(rèn)值。

比如下面這個(gè)情況

父組件

<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異步獲取的值?
?}
}

解決動(dòng)態(tài)獲取props取值傳值問(wèn)題

這情況我是使用watch處理：

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

監(jiān)聽(tīng) name 的值，當(dāng)它由空轉(zhuǎn)變時(shí)就會(huì)觸發(fā)，這時(shí)候就能取到了，拿到值后要做的處理方法也需要在 watch 里面執(zhí)行。

數(shù)據(jù)渲染問(wèn)題

props 渲染時(shí)，直接使用在DOM上使用{{name}}渲染

針對(duì)于動(dòng)態(tài)渲染DOM的操作問(wèn)題：使用this.n e x t T i c k ( ) / / 等待渲染 t h i s . nextTick() //等待渲染 this.nextTick()//等待渲染this.nextTick()將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行

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

props總結(jié)

獲取不到props的原因：

因?yàn)楦附M件中要傳遞給子組件的 props 屬性是通過(guò) ajax請(qǐng)求獲取的，請(qǐng)求的這個(gè)過(guò)程是需要時(shí)間的異步獲取等待返回，然而子組件的渲染要快于ajax請(qǐng)求過(guò)程，所以此時(shí)在created 、 mounted 只執(zhí)行一次的生命鉤子函數(shù)中，執(zhí)行完成后，此時(shí) props 還沒(méi)有傳遞（子組件），所以只能獲取默認(rèn)的props值，當(dāng)props獲取ajax完成后傳遞進(jìn)來(lái)，此時(shí)生命周期函數(shù)已經(jīng)執(zhí)行完成。所以wacth監(jiān)聽(tīng)數(shù)據(jù)變化來(lái)解決問(wèn)題。