可能是因为在onReady里获取子组件的时候,子组件还没有被渲染完毕,导致获取到的子组件为空。可以将获取子组件的代码放在onShow中,确保子组件已经渲染完毕。同时,需要使用this.selectComponent而不是this.selectComponect。
修改后的代码如下:
onShow() {
const history = this.selectComponent('#history');
this.setData({ history });
},
getson() {
if (this.data.isShow) {
console.log(this.data.history);
this.data.history.isshowDow();
}
}
另外,如果子组件方法isshowDow是在子组件生命周期中定义的,需要确保子组件已经完成了生命周期的执行,才能调用子组件方法。可以在子组件中使用ready生命周期函数,确保组件已经渲染完毕。
还可以用ref获取子组件实例
1.确认父组件和子组件的生命周期
首先,需要确认父组件和子组件的生命周期,确保在合适的时机进行调用。如果在父组件的 onLoad 方法中去调用子组件方法,那么很可能子组件还没有初始化完成,此时获取到的子组件是空的。可以考虑在父组件的 onReady 方法中去调用子组件方法,因为此时子组件已经初始化完成了。
-
2.确认获取子组件的方式
如果确认了调用的时机没问题,那么可以检查一下获取子组件的方式。在小程序中,获取子组件有两种方式:
3.其他可能的原因
还有一些其他的可能性,例如子组件被隐藏了、子组件的 setData 方法没有正确更新数据、子组件的方法名写错了等等。如果以上方法都不起作用,可以考虑细致地检查代码,并尝试在代码中打一些日志来帮助排查问题。
根据您提供的代码和截图,我发现在onLoad生命周期函数中,您使用this.selectComponent获取子组件的方法有些问题,因为this.selectComponent是异步方法,需要在this.createSelectorQuery的回调函数中获取到子组件才能使用。
您可以尝试以下修改:
1.将onLoad生命周期函数中的this.selectComponent的调用放到this.createSelectorQuery的回调函数中:
onLoad: function(options) {
let that = this;
const query = wx.createSelectorQuery().in(this)
query.select("#bottomMsg").boundingClientRect(function(res) {
that.bottomMsg = res;
that.getMsgList();
that.subMessage = that.selectComponent("#subMessage"); // 将该行代码移到这里
}).exec()
},
2.在subMessage组件中添加一个公开的方法,用于执行onPullDownRefresh操作:
// subMessage.js
Component({
properties: { ... },
methods: {
// 新增一个公开方法
onPullDownRefresh: function() {
this.loadData();
},
// 省略其它方法
}
})
3.在msgInnerList.js中调用子组件方法时,调用新增的onPullDownRefresh方法:
// msgInnerList.js
Page({
data: { ... },
onLoad: function(options) { ... },
// 调用子组件方法
onPullDownRefresh: function() {
this.selectComponent("#subMessage").onPullDownRefresh();
},
// 省略其它方法
})
这样,您就可以在父组件中调用子组件方法了。
你这个isshow属性,默认是不是设置为false了?后来又改为true了?