最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用
最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 11 | CLI |
示例代码:
<template>
<view>组件</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
defineExpose({
increment
})
</script>
<template>
<view class="content">
<view>使用组件</view>
<upload ref="upRef" />
</view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Upload from '../../components/upload.vue'
const upRef = ref()
onMounted(() => {
// 这里在支付宝端输出为 undefined
console.log(upRef.value)
})
</script>
操作步骤:
- 写一个自定义组件
- 获取组件的引用
<uploader ref="upRef"> const upRef = ref()- 在onShow 里打印一下 upRef , 如
console.log(upRef) - 编译的支付宝小程序,使用支付宝的开发工具运行
- 会发现打印的结果为 undefined
预期结果:
正常应该输出组件的引用对象 , 如下
Proxy(Object){__v_skip: true, increment: ƒ}
实际结果:
实际上支付宝端输出
undefined
希望能尽早修复问题。
bug描述:
在uniapp的 3.0.0-4070620250821001 版本中,支付宝小程序 无法使用 ref 引用。
值得注意的是 在测试中 微信小程序 和 H5 都是正常的,只有支付宝小程序不可以。
const upRef = ref()
onMounted(() => {
// 这里在支付宝端输出为 undefined
console.log(upRef.value)
})
更多关于最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于最新版本(3.0.0-4070620250821001) 在 uni-app 支付宝小程序端 获取不到 ref 的引用的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个在 uni-app 3.0.0-4070620250821001 版本中支付宝小程序平台特有的 ref 引用问题。从代码分析来看,你的 ref 使用方式符合 Vue 3 规范,在微信小程序和 H5 端工作正常,说明核心逻辑没有问题。
问题出现在支付宝小程序的 ref 绑定机制上。在支付宝小程序环境中,ref 的绑定时机可能与组件的挂载时机存在差异。建议尝试以下解决方案:
- 使用 nextTick 延迟获取:
import { nextTick } from 'vue'
onMounted(async () => {
await nextTick()
console.log(upRef.value) // 此时应该能正常获取
})
- 检查组件注册方式: 确保在支付宝小程序中组件注册正确,可以尝试显式注册:
import Upload from '../../components/upload.vue'
const upRef = ref<InstanceType<typeof Upload> | null>(null)

