vue中父组件通过props向子组件传异步值为空

问题：子组件在使用props接收父组件传值的时候，浏览器报错该对象未定义

父组件：

子组件：

控制台：

原因：

当父组件通过 axios 获取数据，子组件使用 props 接收数据时，子组件执行 mounted 的时候，父组件的axios 还没有返回数据，而且 mounted 只执行一次，这时  props 中接收的数据为空，所以在使用的使用自然会报错undefined

思路：

给props接收的参数一个初始空值(不知道思路问题还是啥，这个并没有解决问题)

最终解决方法：

1、使用v-if判断（亲测可用）

2、使用watch监听（未实现）watch使用场景：父组件发生数据变化，动态的传递给子组件，子组件实时刷新视图

 

由于浏览器报错为data.address未定义，所以只要在使用data.address的地方加上判断v-if，data.address不为空的时候才渲染

注：当props中接收的参数为数组时，判断数组长度即可，v-if="xxx.length"