关于uniapp-H5子组件的问题

分类：uni-app

首先感谢dcloud退出uniapp的h5版本，测试一下，如果一个页面引用了子组件，子组件中的onload、onshow 在微信小程序，app中存在，但是h5中没有，这是bug么？但是created等生命周期存在。

2018-11-27 11:28 负责人:无分享

1 个回复

子组件中本不应存在：onload、onshow
子组件的类型不是页面不应该有页面的生命周期。

之前在小程序和app中存在，是由于vue组件转到小程序转换方式的缺陷导致在非页面类型的组件内也能使用页面的生命周期，如果以后改进可能会修复这个问题。

也就是你应该纠正之前在子组件使用页面生命周期的方式，改用在页面内的生命函数里主动调用子组件的方法，或者通过事件通知子组件。

sampen

但在页面的onload生命周期丞数调用子组件的方法会提示该方法undefined ，这个要怎么处理

2019-01-23 23:58
DCloud_UNI_GSQ

回复 sampen:子组件引用不正确吧

2019-01-24 10:44
DCloud_UNI_GSQ

是这样用的吗？this.$refs.子组件.方法(xxx)

2019-01-24 10:45
sampen

回复 DCloud_UNI_GSQ:是的，就是这样引用的，不在生命周期引用的话，是正常的，一旦在生命周期函数onLoad,onShow,onReady等引用，就提示该方法undefined,

2019-02-02 11:34
大肥光光

回复 sampen:this.$refs.子组件.方法(xxx) undefined 的原因是子组件还未渲染就调用了了this.$refs.子组件.方法(xxx)。

解决：this.$nextTick(() => { //等待组件渲染结束才调用

this.$refs.子组件.方法(xxx)

})

2019-03-28 18:06
唱歌去旅行

回复大肥光光: 受用了，谢谢

2019-06-28 16:30
江城

回复大肥光光: 困扰许久的问题解决了感谢

2019-12-12 19:10
wm124455666

回复 DCloud_UNI_GSQ: 但是小程序pc版本，this.$nextTick，又有兼容问题

2020-06-29 16:57
大肥光光

回复 wm124455666: 使用setTimeout是一样的实现方式，但是比较粗糙。总的来说，就是你去this.$refs.xxxx 获取组件实例太早，子组件还没挂载上呢。要等待子组件挂载完成，才行。

2020-07-09 14:35

该问题目前已经被锁定, 无法添加新回复