在uni-app h5环境下使用useTemplateRef会报错

在uni-app h5环境下使用useTemplateRef会报错

示例代码：

<template>
<Modal ref="useModalRef" /> // 自定义组件 可以换成任意标签
</template>  
<script setup lang="ts">
import { useTemplateRef } from 'vue'; // 引入该组件会立即报错  
const useModalRef = useTemplateRef();  
</script>

操作步骤：

贴入代码即可复现

预期结果：

不要报错，尽快修复

实际结果：

不要报错

bug描述：

在h5环境下使用useTemplateRef报错

"vue": "^3.5.14",
"@vue/runtime-core": "^3.4.21",
"@dcloudio/uni-h5": "3.0.0-4060420250429001",

main.js:30  SyntaxError: The requested module '/finditmini/node_modules/@dcloudio/uni-h5-vue/dist/vue.runtime.esm.js' does not provide an export named 'useTemplateRef' (at index.vue:320:66)

Image


更多关于在uni-app h5环境下使用useTemplateRef会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

目前uniapp内部的vue版本为 3.4.21，暂不支持 3.5+ 的特性

更多关于在uni-app h5环境下使用useTemplateRef会报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的vue版本是^3.5.14 也不支持吗？

回复 2***@qq.com: 最好和uniapp保持一个版本

这个错误是因为uni-app的H5环境下使用的Vue运行时版本不支持useTemplateRefAPI。useTemplateRef是Vue 3.4+新增的API，而当前uni-app H5环境内置的Vue运行时版本可能较低。

解决方案：

  1. 使用传统的ref方式替代：
<template>
<Modal ref="modalRef" />
</template>
<script setup>
const modalRef = ref(null)
</script>
  1. 如果必须使用useTemplateRef，可以尝试升级uni-app相关依赖：
npm install [@dcloudio](/user/dcloudio)/uni-h5[@latest](/user/latest)
回到顶部