问题场景：

自己用 Vue 做了一个小组件 role-card ，需要父组件从外面传递对象card-pojo参数进入，然后可以自动完成页面的渲染。

<role-card :card-pojo="cardPojo" />

父组件中的参数获取的方式是：使用axios在 Vue的created钩子处 发送初始化请求到服务器获取，下面的getRoleInfo() 就是封装了请求信息的请求方法。

data() {
    return {
      cardPojo: "",
    };
  },
created() {
    /* 此处初始化角色数据 */
    getRoleInfo(this.myRoleId).then((res) => {
      if (res) {
        this.cardPojo = res.data;
      }
    });
  },

在role-card组件内部的props中，我对输入的card-pojo设置了一个检查，要求必须传入一个对象cardPojo。

props: {
    cardPojo: {
      type: Object, //类型判断
      required: true, //是否必须
    },
},

---

问题描述

再打开页面进行展示的时候，发现页面可以正常运转，但是打开控制台就会发现它出错了。

1个warn

但是很奇怪，参数确实传递过去了，而且页面展示也没有问题。

起初我对这个 warn 选择了视而不见，然而当我大量调用 role-card这个组件的时候，这个错误就越来越离谱了。现在，直接好家伙，这错误报的，控制台滚动条都能够被拖动了。

一堆

---

原因分析：

作为一个强迫症绝对不能忍受，仔细看看他的警告信息。基本上都是说我传过去的参数cardPojo是 undefined或者是空字符串“”，这就奇怪了我的cardPojo怎么就未定义了。

对于解释的理由，这里我能想到的就只有Vue的生命周期了，但是我是在created的时候就发送了请求，难道太晚了? 所以之后我又把它改成在beforeCreate()的钩子发送信息，但是仍然是出现了这些问题。

最终认为问题在于axios，使用的axios发送出去的初始化请求是异步请求，他没有办法保证什么时候获取到数据、哪怕在加载html页面之前就发送了数据，也不一定在加载的时候就已经能够获取到了，所以在获取到数据前一定会报一下数据异常的错误。但是在真正接收到数据后仍然可以通过Vue的绑定去重新加载页面。

---

解决方案：

了解到了问题是axios的异步请求后，但是对于接收数据前的报错依然没有办法解决，因为我没有办法去阻断Vue的生命周期去等待axios请求，而且这也不现实。

最终找到的解决方案就是在要使用到初始化数据的地方，加上v-if选择判断。如果数据已经获取到了进行加载，反之就先暂时不加在这个组件。

即在我之前的代码基础上，做出个v-if判断数据cardPojo的存在即可。

<role-card v-if="cardPojo" :card-pojo="cardPojo" />