父组件内部接口调用 或 父组件加载 完后再加载子组件；控制子组件的加载时机

目录

一、问题

二、解决方法

1.v-if

三、总结

---

一、问题

1.场景一：一个父组件有多个子组件，且子组件都需要取同一个配置项，为了复用代码和减少接口调用次数，直接在 父组件中调用一次接口取配置项后传入子组件，在子组件中直接使用即可。

但是 发现在子组件中取值时，取到的值 是有时候是空的，有时候又是正确的。------间接的异步问题：子组件取值时，父组件的接口没有可能没有调用完。————所以需要先调用完父组件内部接口再 加载子组件。

二、解决方法

1.v-if

1）子组件加上 v-if=" showSon"

2）父组件内部接口调用完成后加载子组件：父组件定义变量 showSon,接口调用前 showSon赋值 false;接口调用完成后赋值 true;

3）父组件加载完后再加载子组件：父组件定义变量showSon赋值 false, 在mounted或onMounted(组合式API)中赋值为 true

4）伪代码如下

<template>
    <div>
        <Son v-if="showSon"></Son>
    </div>
</template>
<script>
    import api from '@/api/nursingAPI.js'
    import Son from './Son.vue'
    export default {
        data(){
            return{
                showSon:false,
            }
        },
        mounted() {
            api()
            .then((result)=>{
                // 接口调用后处理可以写在这里
                // 接口调用后再加载子组件 son
                showSon=true;
            })
        },
        components:{
            Son
        }
    }
</script>

2.待解锁

三、总结

父组件加载完后再加载子组件的方法：

1.使用v-if="isShow"控制 子组件的加载，在不需要加载子组件时，将isShow设为true;在需要加载子组件时将 isShow设为false。

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/