sonicsunsky
sonicsunsky
  • 发布:2021-11-09 16:40
  • 更新:2022-12-09 18:12
  • 阅读:6272

uni-app hbuilderX vue3 元素或组件实例的引用ref无效,加载页面后打印组件实例为null

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macos 11.6.1

HBuilderX类型: Alpha

HBuilderX版本号: 3.2.12

第三方开发者工具版本号: 1.05.2110290

基础库版本号: 2.20.1

项目创建方式: HBuilderX

操作步骤:

<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>```

预期结果:

正常打印出root.value元素

实际结果:

打印root.value为null

bug描述:

uni-app hbuilderX vue3框架 元素或组件实例的引用ref在加载页面后打印ref为null

2021-11-09 16:40 负责人:DCloud_UNI_GSQ 分享
已邀请:
m***@foxmail.com

m***@foxmail.com

遇到了同样的问题。看来是还没有解决呢啊。


应该还是暂时只支持 vue2 中使用 ref 引用组件吧

m***@foxmail.com

m***@foxmail.com

分享下自己的解决办法:

  1. 使用 vue2 写法
  2. 使用 vue3,通过getCurrentInstance 拿到实例,进而拿到 instance.refsinstance.ctx.$refsinstance.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

DCloud_UNI_Anne

DCloud_UNI_Anne

问题已记录,后续会优化,已加分,感谢您的反馈!

  • 1***@qq.com

    请问 大概什么时候能优化好哈

    2021-12-02 10:25

DCloud_UNI_FXY

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 属性,但是打印出来是null

    2022-03-27 18:01

1***@139.com

1***@139.com

我也遇到同样的问题,vue3中,获取不到template ref 的值,还是初始定义的null值,ref用在自定义组件上的

1***@139.com

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

8***@qq.com

3.0.0-3060520221121001 版本出现了这个问题
在 <script setup> 中 使用如下代码 unpaidList.value是个空
// 模板 <UnpaidListVue ref="unpaidList" />

const unpaidList = ref(null)  
function test(){  
   unpaidList.value.getList()  
}

这样写可以

function test(){  
    unpaidList.value && unpaidList.value.getList(patient.value)  
}
  • 8***@qq.com

    emmmm请忽略 是其他问题

    2022-12-09 19:29

要回复问题请先登录注册