<template>
<div ref="root">This is a root element</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// DOM 元素将在初始渲染后分配给 ref
console.log(root.value) // <div>This is a root element</div>
})
return {
root
}
}
}
</script>```
sonicsunsky
- 发布：2021-11-09 16:40
- 更新：2024-10-06 16:13
- 阅读：7930
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macos 11.6.1
HBuilderX类型： Alpha
HBuilderX版本号： 3.2.12
第三方开发者工具版本号： 1.05.2110290
基础库版本号： 2.20.1
项目创建方式： HBuilderX
操作步骤：
预期结果：
正常打印出root.value元素
正常打印出root.value元素
实际结果：
打印root.value为null
打印root.value为null
bug描述：
uni-app hbuilderX vue3框架 元素或组件实例的引用ref在加载页面后打印ref为null
10 个回复
m***@foxmail.com
遇到了同样的问题。看来是还没有解决呢啊。
应该还是暂时只支持 vue2 中使用 ref 引用组件吧
m***@foxmail.com
分享下自己的解决办法：
getCurrentInstance拿到实例，进而拿到instance.refs或instance.ctx.$refs或instance.proxy.$refs（setup 中获取实例，函数中获取 ref）1***@139.com
现在的版本貌似是解决了，可以按照vue3官方的写法了，朋友可以测试测试
2022-07-08 10:39
9***@qq.com
回复 1***@139.com: APP还是不行，已经升级到7月27号版本了
2022-08-13 22:06
m***@foxmail.com
回复 9***@qq.com: 是的我就是 app
2022-08-18 14:41
hbxw
在快手和抖单小程序上，getCurrentInstance都返回空
2024-10-06 16:17
1***@qq.com
回复 1***@139.com: 2024了为啥我的小程序还是不行...
2024-10-23 14:00
f***@vip.qq.com
回复 1***@qq.com: Me too
2024-11-02 18:33
DCloud_UNI_Anne
问题已记录，后续会优化，已加分，感谢您的反馈！
1***@qq.com
请问 大概什么时候能优化好哈
2021-12-02 10:25
DCloud_UNI_FXY
可以更新至最新的HBuilderX Alpha
注意事项：小程序端仅支持对自定义组件使用ref
yinheyibei
自定义组件好像也不太行呢
2022-02-12 20:44
DCloud_UNI_FXY
回复 1***@qq.com: 单独发问题，发测试工程
2022-02-13 11:02
幺叁叁
回复 DCloud_UNI_FXY:
注意事项：小程序端仅支持对自定义组件使用ref
请问小程序要如何调用原生组件的方法呢？
2022-02-24 22:15
DCloud_UNI_FXY
回复 幺叁叁: 举实际的例子说明
2022-02-25 15:59
2***@qq.com
回复 DCloud_UNI_FXY: vue3 script中
const showRight = ref(null);template 中使用的uni-drawer<uni-drawer ref="showRight" mode="right"></uni-deawer>dev到小程序编辑器 在小程序编辑器中控制台打印 showRight.value 值为null,打印showRight 值为RefImpl 对象，问题是RefImpl 对象中有value 属性，但是打印出来是null2022-03-27 18:01
1***@139.com
我也遇到同样的问题，vue3中，获取不到template ref 的值，还是初始定义的null值，ref用在自定义组件上的
DCloud_UNI_FXY
发测试工程
2022-04-28 11:36
1***@139.com
@DCloud_UNI_FXY
运行到谷歌Chrome浏览器Vue3环境可以获取到template ref，
运行到微信小程序开发工具Vue3环境不能获取到template ref，如果是使用vue2 的option api 方式，也即是在methods中可以获取到template ref。
以上，烦请技术大佬帮忙看看，完整工程文件已放在附件中，谢谢！
DCloud_UNI_FXY
你给的代码没法直接运行，要求直接运行的代码
2022-04-28 15:05
王子虾
一模一样的问题啊
https://ask.dcloud.net.cn/question/152767?item_id=211720&rf=false
王子虾
那意思就是，如果要写小程序。。。
需要去获取dom元素时，那就不能用uniapp的vue3版本？？
DCloud_UNI_FXY
小程序不提供dom操作，vue2版本也不支持
2022-09-06 20:34
王子虾
回复 DCloud_UNI_FXY: 那类似这种应该咋写呢？？echarts这种明显需要init绑定一个dom呀
2022-09-06 22:52
DCloud_UNI_FXY
回复 王子虾: 可以在插件市场 https://ext.dcloud.net.cn/ 搜索跨平台的图表插件
2022-09-07 11:00
8***@qq.com
3.0.0-3060520221121001 版本出现了这个问题
在 <script setup> 中 使用如下代码 unpaidList.value是个空
// 模板 <UnpaidListVue ref="unpaidList" />
这样写可以
8***@qq.com
emmmm请忽略 是其他问题
2022-12-09 19:29
hbxw
目前快手抖音小程序还有同样问题