Vue: 模板引用 (Template Refs)

概述

        Vue 的声明式渲染模型抽象了大部分 DOM 操作，但在某些情况下仍需直接访问 DOM 元素或组件实例。模板引用 (ref) 提供了这种能力，允许我们在组件挂载后获得对特定 DOM 元素或子组件实例的直接引用。

基础用法

在模板中声明引用

<template>
  <input ref="myInput">
</template>

在组合式 API 中访问引用

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

// 声明引用，参数必须与模板中的 ref 值匹配
const myInput = useTemplateRef('myInput')

onMounted(() => {
  // 在挂载后访问引用
  myInput.value.focus()
})
</script>

模板引用生命周期流程图

组件上的引用

引用子组件实例

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