出现bug的地方
父向子传参时,父组件中的数据在http请求(异步)之后改变了,子组件中依赖到props的页面并没有更新。但是vue工具中显示的props是改变了
父组件
子组件
子组件中我想默认选中第一个单选框,所以我在子组件声明周期写了
但是我发现页面的单选框始终都是未选中状态,最初我以为是我写在created中时机不对,但是我发现mounted中仍旧拿不到请求后的数据,但是vue工具中显示props是改变了的,找了半天才发现是props异步的问题
我分析原因就是:经历父beforeCreate,父created(由于这里的发送了异步请求,会先跳过),父beforeMount,子组件从beforeCreate到updated中拿到的还是原先的props,直到父mounted之后,执行异步任务的回调,这时候才把新值传给子组件,所以新值永远在子组件渲染完之后
解决办法
方法1:watch监听器
监听到props改变之后,重新赋值给data,再经历update进行页面渲染
方法2:让异步后的props放在子组件mounted之前(v-if)
v-if会销毁组件,设置一个阀门去控制,在await http之后,v-if=true, 这样当http请求之后,子组件才会经历beforeCreate到updated,那么这时候初始化的props才是就是新的了