Vue父组件传参数给子组件时，页面崩溃或者报undefined或者数据为空或者执行了两遍

Vue父组件传参数给子组件时，页面崩溃或者报undefined或者数据为空或者执行了两遍

1. 原因

1. 请求是异步的，当父组件开始请求数据的时候，数据还在请求中的时候子组件已经渲染完毕，所以这个时候的子组件数据是空的，并且使用数据对象里面的某个值时会报undefined。
2. 而当父组件的数据请求完毕，把数据发给子组件时，子数据监听到数据发生了变化，所以数据又接收了一遍，又渲染了一遍。

2、解决方案

1. 在JavaScript中判断这个参数的长度或类型，当参数长度>0或者类型不为undefind的时候执行相对应操作。

   if(this.commentInfo.length > 0) return this.commentInfo.user.uname
   

2. 在html中进行v-if判断，当条件符合时才开始渲染

   <div v-if="commentInfo.length > 0">
     <div class="detail-comment">
       ...
     </div>
   </div>