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

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

父组件:

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

子组件:

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

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

控制台:

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

原因:

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

思路:

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

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

最终解决方法:

1、使用v-if判断(亲测可用)

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

 

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

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

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