26.父组件接口慢导致子组件渲染不成功？

方案：可以用watch监听meta，在监听里面调用接口。这样就保证父组件传过来的值一定能接收到，无论接口的快慢。

 

步骤一：父组件

<template>
    <div>
        <zi-jian :meta='meta'></zijian> //绑定参数:meta
    </div>
</template>
<script>
import ZiJian from '@/components/ZiJian.vue' //引入子组件
export default {
    components:{ZiJian}, //注册子组件
    data() {
        return {
            meta:''
        }
    },
    created() {
        this.getData()
    },
    methods: {
        //模拟父组件接口慢，1s后才出数据
        getData(){
            setTimeout(() => {
                this.meta= 123
            }, 1000);
        },
    }
}
</script>

步骤二：子组件

<template>
    <div>
        <div>姓名:{{user.name}}</div>
        <div>年龄:{{user.age}}</div>
    </div>
</template>
 
<script>
export default {
    props: ['meta'], //接收参数
    data() {
        return {
            user: {}
        }
    },
    //由于父组件接口慢导致数据还未准备好，子组件就开始获取数据，因此获取数据失败
    created() {
        console.log(this.meta);
        setTimeout(() => {
            if (this.meta== 123) {
                this.user = {
                    name: '小明',
                    age: 18
                }
            }
        }, 500);
    },
    //在监听里面调用接口。当父组件数据有变动，子组件才调用方法获取数据，因此获取数据成功
    watch: {
        meta(val, old) {
            console.log(val);
            setTimeout(() => {
                if (val == 123) {
                    this.user = {
                        name: '小明',
                        age: 18
                    }
                }
            }, 500);
        }
    }
}