这次修改bug看起来很简单,但是自己一开始的思路不够清晰,对于vue的理解页不够深刻,总共改了三次,需要记录以及反思。
项目结构:一个母组件下包含两个子组件
需要解决的问题:在product组件中,输入错误的产品ID之后,内容还会加载一遍,出现页面闪烁的问题。
本着修改量越少越好的思路,第一次的时候只修改product组件。发现由于母组件的渲染是依赖于子组件的数据,所以必须在子组件加载完成后才能获得相关的数据,这导致了子组件必然会出现闪烁的情况。
第二次的思路是将页面整体隐藏,待加载完成后再显示。但是由于这个方案将loading以及error状态进行了耦合,会出现诡异的情况:页面内容为空。所以也无法成功。
第三次的思路考虑到了两点:
1. loading以及error状态的去耦合
2. error 参数以及返回的error message参数只是再当前组件下被使用,所以需要用父子组件传参的情况下进行使用。这要求将主API('/product/getDetail')迁移到母组件中。在迁移的过程中,需要注意再接口完成后加上loading Success为true的参数,以及适配globalVar。母组件的接口布局也要进行修改:分为正常内容组件以及报错内容组件,如图:
总结:母组件所用到的数据需要通过props传送到子组件,母组件对于数据的loading以及error状态应该有控制权。