vue 组件参数得传递与父组件接口慢 导致子组件数据不能成功渲染

实际开发中，为了减少代码量，通常会写组件来进行复用，这就牵扯到了组件间得参数传递，假如我们写的组件中 需要调用接口 来渲染组件得数据，而调用组件中接口得入参又需要从父组件中调用接口来获得的，那么这就会发生问题，如果两个接口的速度一样快还好 ，可是一旦子组件中接口的速度快，而父组件中的接口的速度慢的话，就会发生组件中想要调用接口的入参是 空 没有 ，这样接口调用不成功，子组件中的数据就渲染不出来，那么怎么解决这个问题那？

首先我们假设 需要用父组件中的接口返回的code 传递给子组件 ，子组件中用code调用接口，来查询学生信息

这里我们用setTimeout 模拟接口

父组件

<template>
  <div id="app">
   <alert :code='code' ref="alert"></alert>
  </div>
</template>
<script>
import alert from '@/components/alert.vue'
export default {
  components:{alert},
  data() {
    return {
      code:''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      setTimeout(() => {
       this.code = 123
      }, 1000);
    },
  }
}

子组件

<template>
  <div>
    <div>
      学生姓名:{{user.name}}
    </div>
    <div>
      学生年龄:{{user.age}}
    </div>
  </div>
</template>

<script>
export default {
  props: ['code'],
  data() {
    return {
      user: {}
    }
  },
  created() {
 console.log(this.code);
    setTimeout(() => {
      if (this.code == 123) {
        this.user = {
          name: '小明',
          age: 18
        }
      }
    }, 500);
  },
  watch: {
    code(val, old) {
    //     console.log(val);
    //   setTimeout(() => {
    //     if (val == 123) {
    //       this.user = {
    //         name: '小明',
    //         age: 18
    //       }
    //     }
    //   }, 500);
    }
  }
}

上面的代码一运行之后 效果是这样的 

 我们看控制台 获取不到code 是因为 父组件中接口慢 导致 传递过来的code 是空

我们可以用监听watch 监听code 在监听里面调用接口 这样就保证 父组件传过来的code 一定能接收到 无论接口的快慢

 

 

我们看 这样 数据成功被渲染了出来 控制台上 code 也被打印了出来