这是我参加「第四届青训营」笔记创作活动的第四天
在写青训营大项目的过程中,曾遇到过这样一个问题,就是在head组件里需要利用main组件传过来的参数去请求数据,但是这个问题想要实现,一定要处理好这个过程的执行顺序,组件传参也有多种方法,请求数据也可以放在不同的位置(生命周期mounted中),但想要实现这个效果,到底哪种才可以呢。
1.首先是最开始的想法,想利用&bus进行组件传参,.emit发送,.on接收到参数,此时利用button按钮绑定事件去请求数据。
这种方式下,就可以实现一切想要的功能,前提是需要你使用button去点击触发请求数据事件,页面才可以切换表达出你想要的数据,这显然不是我们想要的效果。
2.所以我们利用生命周期去改变执行的顺序,让页面在初始化之后触发请求数据事件。
通过测试,他无法成功请求到数据,因为在请求数据的时候,组件传参的参数还没有传递过来,所以他拿的是空值去找后端请求数据,返回的也是空值。这个时候就去思考应该怎么调整执行的顺序才能让请求数据的时候已经拿到传过来的参数,尝试过让&bus.emit在created阶段触发,&bus.on在mounted阶段触发,还有给axios请求参数的语句加了nextTick(想让他晚一点执行),但是都没法实现,这个传参的顺序优先级就是比较靠后。
3.之后不得已更换了传参的方法,利用props实现父子组件间的传参,利用mounted触发请求数据事件。
组件传参过程
请求参数过程
最终处理好了组件传参和请求数据的执行顺序,成功接收到想要的数据。
以上就是对组件传参和利用参数请求数据执行顺序问题的思路和解决办法,希望能对读者们有一点点帮助.^^