1.子组件生命周期钩子里接收不到props数据问题

场景回忆: 父组件中

<template>
    <Child :data="data"/>
</template>
<script>
import Child from "@/components/Child"
import {getData} from "@/api/xxx"
export default {
    components:{Child}
    data(){
        return {
            data:'',
        }
    },
    async created(){
        const res = await getData()
        if (res && res.success) {
            this.data = res.data
        }
    }
}
</script>

子组件中

<template>
    <div>{{log}}</div>
</template>
<script>

export default {
    props:["data"]
    data(){
        return {
            log:'',
        }
    },
    created(){
        this.log = data;
    }
}
</script>

有的时候突然发现log中数据为空，天哪，出bug了！冷静分析一下原因，研究一下父子组件渲染时生命周期钩子函数执行顺序: 父-beforeCreate → 父-created→ 父-beforeMount → 子-beforeCreate → 子-created → 子-beforeMount → 子-mounted → 父-mounted，那按理说子组件的created是慢于父组件的created的，为什么拿不到数据呢？

解决方法: 参考博客blog.csdn.net/zmkyf1993/a…

出现这种情况的原因, 因为父组件中的要就要传递的props属性是通过接口请求回来的, 请求的这个过程是需要时间的，但是子组件的渲染要快于接口请求过程，所以此时created、mounted这样的只会执行一次的生命周期钩子，已经执行了，但是props还没有流进来（子组件），所以只能拿到默认值。正解子组件中

<template>
    <div>{{log}}</div>
</template>
<script>

export default {
    props:["data"]
    data(){
        return {
            log:'',
        }
    },
    watch:{
        data(newVal, oldVal){
            // 正确的赋值
            this.log = newVal
        }
    },
    created(){
        // 错误的赋值
        // this.log = data;
    }
}
</script>

另一种解决方案是使用计算属性代码:

<template>
    <div>{{log}}</div>
</template>

<script>
export default {
    props:["data"]
    data(){
        return {
        }
    },
    computed:{
        log(){
            // 正确的赋值
            return this.data
        }
    },
    created(){
        // 错误的赋值
        // this.log = data;
    }
}
</script>

Vue相关问题

1.子组件生命周期钩子里接收不到props数据问题