this.$refs报错分析及解决；解决$ref报错：[Vue warn]: Error in onShow hook: “TypeError: Cannot read properties of undefined (reading ‘goLogin’)”

今天调试支付宝小程序时报错：

vendor.js:4995 [Vue warn]: Error in onShow hook: "TypeError: Cannot read properties of undefined (reading 'goLogin')"

引起报错的代码行是：

this.$refs.mychild.goLogin();

打印this.$refs是有内容的，但是为什么出错？

好了，暂不问报错原因，直接上解决方法：

由于 this.$refs可以获取到，因此可以断定支付宝小程序中是可以使用 ref，并通过 this.$refs 来获取组件的。上面出现无法获取的问题，可能就是出在使用了子组件。

解决方法：

方法一：使用setTimeout

setTimeout(() => { // 该定时器防止子组件未渲染导致获取不到
  console.log(this.$refs)
  this.$refs.mychild.goLogin();
}, 200)

方法二：使用$nextTick

this.$nextTick(() => {
    this.$refs.mychild.goLogin();
});

方法三：在mounted()钩子函数中调用

当然，这需要根据实际需求，根据实际业务逻辑去写。

mounted() {
  this.$refs.mychild.goLogin();
}