需求场景:
使用vue-cli创建的项目,父组件LeftMainmenu.vue里通过<router-view>加载了子组件,父组件与子组件的methods里各自有方法,初始化的时候在mounted里进行了调用。预设的想法是想在父组件LeftMainmenu.vue的方法里把axios请求到的数据设置成缓存【以下用localdata替代】,然后子组件调用的方法去使用localdata进行接下来的操作。但调试结果发现,无论父组件LeftMainmenu.vue里的方法放在函数生命周期里的哪个钩子里,执行的顺序总是慢于子组件的方法,导致子组件里调用的localdata数据为空……
这时候可能会有人说,在子组件里面写一个watch监听这个localdata不就可以了。虽然这样确实可以拿到不为空的数据,但是你会发现跟这个数据相关的方法执行了两次,这也不奇怪,因为localdata最开始是为空,父组件执行之后给localdata赋值,watch监听到了变化,会再次执行相关方法。这也不是完美的解决方法~~~~~~~
一、研究一下父子组件生命周期的执行顺序
这个是父组件,<router-view>用来存放子组件
测试之后会发现执行的顺序,父组件的mounted在最后才会执行,这就可以解释为什么最开始拿到的localdata为空了~~
二、解决方案
思路① :用v-if判断在父组件挂载成功之后再去渲染子组件,
如果子组件依赖父组件的axios返回值,也可以在请求成功的回调里设置this.ok=true;
思路②:在父组件mounted回调里执行先执行父组件的初始化函数,然后执行子组件的初始化函数(或者在父组件的axios成功回调里再执行子组件的初始化函数)。这种方法需要给放子组件的标签添加一个ref属性<router-view ref="son">,通过this.$refs.son.getsubData();【getsubData为子组件的方法名,也可以传参数】。父组件调用如下图【其中getJson是父组件请求接口获取localdata的方法】
总结:第一种可控性更强,第二种需要定义初始化的函数名,而且子组件初始化调用多个方法的时候这种写法比较混乱~~~~~~