vue父组件异步传递props值,子组件接收不到解决方案_vue.js_

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

贴上父组件代码图：

子组件代码图：

打印结果：

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

这里有两种解决思路

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

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

第二种：父组件使用v-if判断

定义flag默认值false，异步之后设为true是为了确保数据有值，这样一来子组件里就不用watch监听数据啦

结果

综上就是解决父组件异步传递props值，子组件接收不到的问题的解决方案，如果有更好的解决方案欢迎来撩

父组件传递props异步数据到子组件遇到的问题

状况一

父组件parent.vue

// asyncData为异步获取的数据，想传递给子组件使用 

子组件child.vue

子组件的html中的{{childData}}的值会随着父组件的值而改变

但是created里面的却不会发生改变(生命周期问题)

案例二

parent.vue

子组件 children

created里面的却不会发生改变， 子组件的html中的{{{childObject.items[0]}}的值虽然会随着父组件的值而改变，但是过程中会报错。

是因为：首先传过来的是空，然后再异步刷新值，也就是开始时候childObject.items[0]等同于’’.item[0]这样的操作，

所以就会报下面的错：

解决办法：

1、使用v-if可以解决报错问题和created为空问题

父组件parent

子页面 children

2、子组件使用watch来监听父组件改变的prop，使用methods来代替created

子组件 children

3、子组件watch computed data 相结合(麻烦)

子组件children

4、使用prop default来解决{{childObject.items[0]}}

父组件：

子组件：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！