自定义组件中,使用onLoad,onShow生命周期失效问题

自定义组件中,使用onLoad,onShow生命周期失效问题

官方文档可查阅到:
页面生命周期仅在page中的vue页面有效,而单独封装的组件中【页面周期无效】,但是Vue的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】,
组件页面只能使用vue生命周期函数。

解决方案:
1.用vue生命周期函数created(),mounted()替换,如果页面想要实时更新页面的效果不建议使用。(mounted函数存在延迟,即当前组件加载后,如果想要实时更新页面效果,还需要切换其他组件,再切换回来才能实现页面效果)
2.子组件上添加ref,父组件通过ref在页面相对应的生命周期函数中调用子组件的方法(如刷新列表数据)
子组件在methods中定义一个盛放onload和onshow中代码的函数(函数名:onLoadMethod)。在父组件显示该组件时通过ref调用子组件onLoadMethod方法。

补充知识:
uniapp中有应用生命周期、页面生命周期、组件生命周期(同vue标准组件的生命周期相同)
uni-app支持的应用生命周期:
在这里插入图片描述
注意:应用生命周期仅可在App.vue中监听,在其它页面监听无效。

uni-app支持的页面生命周期函数:
在这里插入图片描述
在这里插入图片描述

注意:页面生命周期仅在page页面有效,而单独封装的组件中【页面周期无效】,但是Vue
的生命周期依然有效 【Vue的生命周期在任何地方都是有效的】

uni-app组件生命周期函数(同vue)
在这里插入图片描述

vue生命周期函数(vue3 选项式api):
在这里插入图片描述

参考:https://blog.csdn.net/qq_51250105/article/details/130065729?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-130065729-blog-129879407.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-130065729-blog-129879407.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=2

https://blog.csdn.net/m0_58889179/article/details/129879407?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129879407-blog-105355651.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-129879407-blog-105355651.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=2

https://blog.csdn.net/zlsjune123/article/details/105355651?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-105355651-blog-129879407.235%5Ev38%5Epc_relevant_anti_t3&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-105355651-blog-129879407.235%5Ev38%5Epc_relevant_anti_t3&utm_relevant_index=1

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值