在项目中,遇到VUE父子组件的传参问题,父组件传参给子组件,子组件在CREATED和MOUNTED等生命周期中获取不到,也无法使用父组件传递过来的参数。
在项目中,遇到VUE父子组件的传参问题,父组件传参给子组件,子组件在CREATED和MOUNTED等生命周期中获取不到,也无法使用父组件传递过来的参数。
父组件传参,一般分为两种情况:
1、父组中的原始数据 (即定义在父组件data中的原始数据),传输给子组件使用,子组件在生命周期中是可以获取并使用的。
2、父组件传给子组件的参数,是从接口中获取到的, 可能遇到的问题就是,如果在组件的created或mounted生命周期中定义要给方法,在子组件渲染时就获取父组件的传值,并进行新数据的获取并进行页面渲染,但此时父组件请求的数据可能还没有完全返回,子组件就开始使用此数据,该数据自然不存在,打印在控制台中的父组件穿给子组件的参数为undefined,因此就会出现父组件传参不及时,子组件使用数据较早,造成数据无法使用。
解决改问题的方法:
1、在子组件的created或者mounted等较早执行的生命周期中使用setTimeout定时器,来延缓执行生命周期中的函数, 使父组件从接口中获取的参数,有充分的时间传输,在子组件使用时,等待父组件的参数到来再执行,就不会出现拿不到父组件的传参问题了。
该方法虽然可以解决上述问题,但延时调用影响了页面的响应速度,
不是一个很好的解决办法(不推荐)
2、另一种方法为watch侦听:
使用vue的监听方法,监听父组件的传参,一旦侦听到数据返回,便立即调用子组件的方法进行数据获取,相对于第一种方法,更加灵活和快速。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通