小程序父组件调用子组件方法失败

img

img

img

img


获取到子组件是空,能正常显示的,而且之前是可以的,突然不行了,点击可以获取,之前我不点击能用的

可能是因为在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.确认获取子组件的方式
如果确认了调用的时机没问题,那么可以检查一下获取子组件的方式。在小程序中,获取子组件有两种方式:

  • 通过 id 获取:使用 this.selectComponent('#component-id') 的方式来获取子组件,其中 component-id 为子组件的 id;
  • 通过自定义组件的名称获取:在子组件中使用 Component({...}) 定义组件时,需要设置 componentName 属性,然后在父组件中使用 this.selectComponent('.component-class') 的方式来获取子组件,其中 component-class 为子组件的 componentName 属性。

如果你使用的是第一种方式,可以检查一下 id 是否设置正确。如果你使用的是第二种方式,可以检查一下子组件的 componentName 属性是否设置正确。

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了?