异步props传参问题

167 阅读1分钟

出现bug的地方

父向子传参时,父组件中的数据在http请求(异步)之后改变了,子组件中依赖到props的页面并没有更新。但是vue工具中显示的props是改变了

父组件

image.png image.png

子组件

子组件中我想默认选中第一个单选框,所以我在子组件声明周期写了 image.png 但是我发现页面的单选框始终都是未选中状态,最初我以为是我写在created中时机不对,但是我发现mounted中仍旧拿不到请求后的数据,但是vue工具中显示props是改变了的,找了半天才发现是props异步的问题

我分析原因就是:经历父beforeCreate,父created(由于这里的发送了异步请求,会先跳过),父beforeMount,子组件从beforeCreate到updated中拿到的还是原先的props,直到父mounted之后,执行异步任务的回调,这时候才把新值传给子组件,所以新值永远在子组件渲染完之后

解决办法

方法1:watch监听器

image.png 监听到props改变之后,重新赋值给data,再经历update进行页面渲染

方法2:让异步后的props放在子组件mounted之前(v-if)

v-if会销毁组件,设置一个阀门去控制,在await http之后,v-if=true, 这样当http请求之后,子组件才会经历beforeCreate到updated,那么这时候初始化的props才是就是新的了