Vue父组件异步传props，子组件为何接收不到？

本文共计1605个文字，预计阅读时间需要7分钟。

目录+父子组件异步请求数据后传递值给子组件，子组件接收不到+解决方案+思路一：父子组件通过props传递异步数据到子组件+遇到的问题+状态一+案例一+思路二：父子组件异步请求数据后传递值给子组件

目录

• 父组件异步请求数据之后传值给子组件，子组件接收不到
• 这里有两种解决思路
• 父组件传递props异步数据到子组件遇到的问题
• 状况一
• 案例二

父组件异步请求数据之后传值给子组件，子组件接收不到

贴上父组件代码图：

子组件代码图：

打印结果：

父组件异步请求数据回来在传到子组件，子组件无法接收，打印的依然是默认值。

这里有两种解决思路

第一种：子组件使用watch监听

但是watch监听也会有接收不到值的情况，因为要修改props的favoriteValue的值，favoriteValue接收不到的话就无法修改，所以这里同时给favoriteValue、isfavorite赋值，此时favoriteValue没值，但是data的isfavorite有值，所以后面的修改favoriteValue值的操作有效。