vue：等父组件中的接口执行完毕之后，再调用子组件的接口

---

前言

在项目中遇到的一个问题：在父组件中有一些接口调用完成之后，传到子组件中，子组件再根据父组件传过来的值进行其他接口的调用。但是在vue的父组件中接口还没有请求完，子组件已经渲染完成了，导致子组件的接口的传参不正确。

---

一、首先来看一下vue父子组件的渲染顺序？

1、挂载渲染的顺序
父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted

2、更新的顺序
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

3、销毁的顺序
父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destroyed

二、解决办法

1.v-if=“flag”

在子组件上添加v-if=”flag“，flag默认为false，在父组件的接口请求完成时候，让flag为true。

代码如下（示例）：

<day-challenge v-if="falg" :json="json"></day-challenge>

但是这个方法有问题，刚进来页面的时候没有占位，看起来会有点突然。

2.在子组件中设置监听器

代码如下（示例）：

自定义一个字段falg，默认false，在子组件中去监听falg，当falg为true时再去调用接口

// 父组件
<day-challenge :falg="falg" :json="json"></day-challenge>

// 子组件
data() {
    return {
      falg1: false
    };
  },
props: {
    json: {
      type: Object
    },
    falg: {
      type: Boolean,
      default: false
    }
  },
watch: {
    'json.stage_id' : {
      handler() {
        if(this.falg1) {
          this.init();
        }
      },
      immediate: false
    },
    falg: {
      handler(val) {
        this.falg1 = val;
        if(this.falg1) {
          this.init()
        }
      },
      immediate: true
    }
  },

这样就会很自然，表格中原本的默认数据为空都可以展现出来

---

总结

监听器使用要注意不要重复调用接口