解决 uni-app 自定义组件在支付宝小程序中无法使用 ref 的问题

朱雀 2021-03-23 10:18 3812阅读 0赞

### 问题描述

最近在用 uni-app 开发前端页面时，原本只对 H5、微信小程序做兼容，一直没啥问题。今天在支付宝小程序上面跑了一下，发现兼容问题不少，比如说通过 ref 调用自定义组件中的方法时，发现无法通过 this.$refs 来获取子组件。部分代码如下：

**子组件 child-component：**

```
<template>
    <view></view>
</template>

**引入子组件的页面：**

```
<template>
    <view>
        <button @tap="toShow">显示</button>
        <uni-popup ref="uni-popup" @tap.stop="" @change="popupChange">
            <child-component ref="child-component"/>
        </uni-popup>
    </view>
</template>

**问题表现：**
在支付宝小程序中运行后，会出现如下错误：

Uncaught TypeError: Cannot read property 'init' of undefined at ***.js

根据字面意思就很容易知道问题所在，this.$refs['child-component'] 得到的是 null。

### 问题解决

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

既然 this.$refs['uni-popup'] 不为空，那我们就看看它的值具体是怎样的：

![](/images/20210323/1616494680349.jpg)

如图，我们发现 this.$refs['uni-popup'] 中的 refs 存在我们要的子组件，因此我们可以直接通过 this.$refs['uni-popup'].$refs['child-component'] 获取子组件。改造下上面的代码后如下：

再次在支付宝小程序中运行，发现问题已解决了。

解决 uni-app 自定义组件在支付宝小程序中无法使用 ref 的问题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【小程序】自定义组件样式

相关支付宝小程序实现自定义地区三级联动

相关支付宝小程序自定义头部组件

相关 uniapp兼容微信小程序和支付宝小程序遇见的坑

相关 uniapp使用支付宝支付

相关支付宝小程序中使用阿里字体图标

相关 ASP.NET Core在支付宝小程序中使用signalR

相关支付宝小程序

相关微信小程序中的自定义组件

相关解决 uni-app 自定义组件在支付宝小程序中无法使用 ref 的问题