vue中子元件的created、mounted生命周期鈎子中擷取不到props中的值問題

父子元件通信

這個很簡單，父元件中使用v-bind綁定傳送，子元件使用props接收即可 。

例如：在父元件中

<template>
    <div>
        <div :Data="Data"></div>
    </div>
</template>

<script>
    data(){
            return {
                Data: [10,20,30]
            }
        },
</script>
           

子元件中：

export default{
	props:{
		type:Array,
		default(){
			return []
		}
	}
}
           

這種情況下你的Data值是固定的，子元件的 methods 中想要取到props中的值，直接使用 this.chartData 即可 。

但是有的情況下，你的Data 裡面的值并不是固定的，而是動态擷取的，這種情況下，你會發現 methods 中是取不到你的 Data 的，或者取到的一直是預設值。

解決辦法：

這種情況我是使用watch處理

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

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

//總結

出現這種情況的原因, 因為父元件中要傳遞的 props 屬性 是通過 發生ajax請求回來的, 請求的這個過程是需要時間的，但是子元件的渲染要快于ajax請求過程，是以此時 created 、 mounted 這樣的隻會執行一次的生命周期鈎子，已經執行了，但是 props 還沒有流進來（子元件），是以隻能拿到預設值。