uniapp usetemplateref 如何使用

在uniapp中，如何使用useTemplateRef获取组件或DOM节点的引用？我尝试按照Vue3的模板引用方式操作，但发现无法正常获取节点实例。能否提供一个具体的使用示例，包括如何声明、绑定以及在setup中正确调用？另外，uniapp的useTemplateRef和普通Vue项目中的用法有什么区别需要注意的吗？

2 回复

在uni-app中，使用useTemplateRef获取组件实例：

  1. 在模板中给组件添加ref属性：
<view ref="myRef">内容</view>
  1. 在setup中获取引用：
import { ref } from 'vue'

const myRef = ref(null)
// 通过myRef.value访问DOM或组件实例

注意：需要配合Vue3的Composition API使用。


在 UniApp 中，useTemplateRef 是 Vue 3 Composition API 的一部分，用于在组合式函数中获取模板引用（template refs）。它类似于 ref，但专门用于引用模板中的 DOM 元素或组件实例。以下是详细使用方法：

基本用法

  1. 引入 useTemplateRef：
    在 Vue 3 的 setup 函数或 <script setup> 中，从 vue 导入 useTemplateRef（或直接使用 ref，因为 UniApp 基于 Vue 3）。

  2. 创建引用：
    使用 useTemplateRef 声明一个引用变量，并在模板中通过 ref 属性绑定。

  3. 访问引用：
    在生命周期钩子（如 onMounted）或事件中访问引用的值。

代码示例

以下是一个简单示例，演示如何引用一个输入框并聚焦：

<template>
  <view>
    <input ref="inputRef" type="text" placeholder="点击按钮聚焦" />
    <button @click="focusInput">聚焦输入框</button>
  </view>
</template>

<script setup>
import { useTemplateRef, onMounted } from 'vue'

// 创建模板引用
const inputRef = useTemplateRef(null)

// 方法：聚焦输入框
const focusInput = () => {
  if (inputRef.value) {
    inputRef.value.focus()
  }
}

// 生命周期：组件挂载后自动聚焦
onMounted(() => {
  if (inputRef.value) {
    inputRef.value.focus()
  }
})
</script>

注意事项

  • UniApp 兼容性：确保项目基于 Vue 3（如使用 vite 或 vue-cli 创建）。UniApp 默认支持 Vue 3 语法。
  • 引用初始值：useTemplateRef 初始为 null，在组件挂载后才会赋值。
  • 模板绑定：在模板中使用 ref="变量名" 绑定引用，无需使用 :（非响应式绑定）。
  • 访问时机：避免在挂载前访问引用，否则值为 null。使用 onMounted 或事件处理程序确保引用已就绪。

替代方案

在 UniApp 中，也可以直接使用 ref（从 vue 导入）实现相同功能，因为 useTemplateRef 本质是 ref 的别名：

import { ref } from 'vue'
const inputRef = ref(null)

总结

useTemplateRef 简化了模板引用的管理，适用于操作 DOM 或子组件。如果遇到问题，检查 UniApp 版本和 Vue 3 配置。实际开发中，直接使用 ref 更常见。

回到顶部