Angular框架中的父子组件通信传递异步的数据接收值异常的问题(Async Data)

父组件传递给子组件的值为 async data 异步数据，子组件接收的过程中可能就会出现问题，子组件接收不到父组件传递过来的值，此时视图也无法进行渲染。

根据结果来看，子组件并未接收到，获取的值是一个空数组。

父组件User组件：

如果想在模板中直接使用的话，可以使用 AsyncPipe 。

在实际的开发场景中，需要参考业务层的应用方式，如果数据源只产生一次或者很少的次数的变化，那么可以直接考虑使用 *ngIf 指令，即当父组件异步数据获取到的时候才进行子组件的加载。如果是持续不断的改变，那么需要使用以上的方法去解决异步导致数据源无法获取的问题。

在开发中有时候会遇到子组件渲染完成了请求也没响应回来的情况

父子组件的钩子并不会等待请求返回，请求是异步的，VUE设计也不能因为请求没有响应而不执行后面的钩子，因此，偶尔会遇到请求也正常请求了，数据也能在控制台打印出来，但是页面就是没渲染数据的问题，下面总结一下解决方案：

在渲染子组件的时候加上一个条件,data1是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。最后执行父组件的mounted。

在父组件请求数据完成并赋值对应的传给子组件的变量后，子组件prop发生改变，子组件watch对应的prop，再做相关 *** 作

原因是父组件请求数据时,子组件已经渲染完毕,这个时候传了一个空数组给子组件子,子组件用到父组件传过来的值而出现的报错

解决办法:

1. 给子组件添加一个渲染条件,有值的时候在渲染

2. 使用watch监听,数据变化时动态更新数据

3. 把数据存储到vuex 读取vuex里面的数据

4. 通过ref 直接给组件赋值,不过这已经是在 *** 作dom了(不建议使用)

---