uni-app uni-forms 添加 ref 属性报错

示例代码：

<uni-forms ref="valiForm">  
</uni-forms>

操作步骤：

随便个页面添加

<uni-forms ref="valiForm">  
</uni-forms>

预期结果：

能加 ref

实际结果：

TypeError: Cannot create property ‘errMsg’ on string ‘Cannot create property ‘errMsg’ on string ‘Cannot create property ‘errMsg’ on string ‘Cannot create property ‘errMsg’ on string ‘Cannot create property ‘errMsg’ on string ‘valiForm is not defined’’’’’

at Object.returnValue ((index):1441:13) at processReturnValue ((index):862:29) at (index):808:27 at c.emit (af-appx.worker.min.js:26:64929) at Jv.onerror (af-appx.worker.min.js:26:407007) at n (144b417e-de6c-4958-8711-25d189d13c67:1:95) at i (af-appx.worker.min.js:26:63855) at c.emit (af-appx.worker.min.js:26:64954) at Jv.onerror (af-appx.worker.min.js:26:407007) at n (144b417e-de6c-4958-8711-25d189d13c67:1:95)

bug描述：

<uni-forms ref="valiForm">  
</uni-forms>

加上ref="valiForm"报错：ReferenceError: valiForm is not defined 然后，就慢慢的卡死，TypeError 信息越来越多知道卡死。

注：去掉 ref=“valiForm” 就没问题。 vue3

更多关于uni-app uni-forms 添加 ref 属性报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼

该bug反馈内容基本完整但存在关键缺失：标题和描述清晰，但代码示例过于简略（缺少完整页面结构和script部分），复现步骤模糊（未说明页面类型是vue/nvue），且未提供uni-app核心版本号（仅HBuilderX 4.85）。实际结果中的TypeError堆栈显示错误处理系统异常，但"valiForm is not defined"不符合Vue规范——ref属性本身不会触发ReferenceError，正常应通过this.$refs.valiForm访问。
经核查知识库uni-forms文档，组件明确支持ref用于调用setRules/validate等方法，且文档示例包含ref用法。该问题可能由以下原因导致：

用户误在模板中直接使用{{valiForm}}（但反馈中仅添加ref属性）
HBuilderX 4.85对应uni-app版本存在ref处理缺陷（当前最新正式版为4.86+）
特定平台兼容性问题（但反馈未指明运行平台）

建议用户：

更新至HBuilderX最新正式版（4.86+）
检查是否在script中错误使用valiForm变量（正确用法：this.$refs.valiForm）
提供完整可复现代码（含script setup部分）
若为鸿蒙平台需注意uni-app-x与标准uni-app的差异

此反馈疑似环境配置或使用方式问题，非组件设计缺陷，但需更多现场信息确认。内容为 AI 生成，仅供参考

更多关于uni-app uni-forms 添加 ref 属性报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 2楼

<uni-forms ref="valiForm">  

</uni-forms>

</template> <script setup> defineOptions({ name: 'User' }) </script> <style> </style>

不用代码多了，在组件里这样就报错

yuanlaile 3楼

我擦，真服了，在下面定义了 ref 就好了 const valiForm = ref()

nodeper 4楼

这个错误通常是因为在 Vue 3 的 Composition API 中，ref 的使用方式发生了变化。

在 Vue 3 中，你需要先在 setup() 函数中定义 ref，然后在模板中使用。对于 uni-forms 组件，正确的使用方式是：

<template>
  <uni-forms ref="valiForm">  
  </uni-forms>
</template>

<script setup>
import { ref } from 'vue'

const valiForm = ref(null)

// 后续可以通过 valiForm.value 访问表单实例
</script>

如果你使用的是 Options API（Vue 2 风格），应该这样写：

<template>
  <uni-forms ref="valiForm">  
  </uni-forms>
</template>

<script>
export default {
  methods: {
    // 通过 this.$refs.valiForm 访问表单实例
    submitForm() {
      this.$refs.valiForm.validate()
    }
  }
}
</script>