Vue 3 模板引用（Template Refs）详解与实战示例
引言
在 Vue 开发中，通常推荐使用 响应式数据 (ref 和 reactive) 进行数据绑定，而不是直接操作 DOM。但是，在某些情况下，我们确实需要访问某个组件或 DOM 元素，这时候就可以使用 模板引用（Template Refs）。
本篇文章将详细介绍 Vue 3 的 ref 模板引用的用法、适用场景，并通过多个示例展示如何在 Vue 组件中高效操作 DOM 和组件实例。
1. 什么是 Vue 模板引用？
模板引用（Template Refs） 允许我们在 Vue 组件的模板中标记一个 DOM 元素或子组件，并在 setup 选项中访问它。
基本语法
<template><div ref="myDiv">Hello Vue!</div>
</template><script setup>
import { ref, onMounted } from 'vue';const myDiv = ref(null); // 定义模板引用onMounted(() => {console.log(myDiv.value); // 获取 DOM 元素
});
</script>
说明：
ref="myDiv"绑定到myDiv变量onMounted钩子确保myDiv.value在 DOM 渲染完成后可用
2. 模板引用的使用场景
✅ 操作原生 DOM
当我们需要手动操作 DOM 时，如获取元素的宽高、设置焦点等：
<template><input ref="inputRef" type="text" placeholder="输入内容"><button @click="focusInput">聚焦输入框</button>
</template><script setup>
import { ref } from 'vue';const inputRef = ref(null);const focusInput = () => {inputRef.value.focus(); // 手动聚焦输入框
};
</script>
✅ 获取子组件实例
可以使用 ref 访问子组件的方法和数据：
<!-- 子组件 (Child.vue) -->
<template><div>子组件</div>
</template><script setup>
import { ref } from 'vue';const message = ref("Hello from Child Component!");const sayHello = () => {console.log(message.value);
};defineExpose({ sayHello }); // 允许父组件访问 `sayHello`
</script>
<!-- 父组件 -->
<template><Child ref="childRef" /><button @click="callChildMethod">调用子组件方法</button>
</template><script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue';const childRef = ref(null);onMounted(() => {console.log(childRef.value); // 获取子组件实例
});const callChildMethod = () => {childRef.value.sayHello(); // 调用子组件方法
};
</script>
defineExpose：Vue 3 需要使用defineExpose公开组件方法，否则父组件无法访问。
3. 使用 ref 访问多个元素
当我们需要访问 多个 DOM 元素时，可以使用 ref 结合 v-for：
<template><div v-for="(item, index) in list" :key="index" ref="itemRefs">{{ item }}</div><button @click="logElements">查看所有元素</button>
</template><script setup>
import { ref, onMounted } from 'vue';const list = ref(["Vue", "React", "Angular"]);
const itemRefs = ref([]); // 存储多个 DOM 元素onMounted(() => {console.log(itemRefs.value); // 所有 div 的 DOM 元素
});const logElements = () => {itemRefs.value.forEach(el => console.log(el.textContent));
};
</script>
注意：
ref数组会在onMounted之后才填充值。
4. 访问 setup() 之外的数据
如果你在 setup() 之外使用 ref，可以通过 getCurrentInstance() 获取 Vue 实例：
<script setup>
import { getCurrentInstance, onMounted } from 'vue';onMounted(() => {const instance = getCurrentInstance();console.log(instance.refs); // 访问 ref
});
</script>
5. 结论
Vue 3 的 模板引用（Template Refs） 让我们可以更方便地访问 DOM 和子组件实例，适用于：
- 操作原生 DOM（如获取焦点、测量元素尺寸）
- 调用子组件方法（通过
ref和defineExpose） - 获取多个元素（使用
ref数组）
但是，如果能用 Vue 的 响应式数据 来实现同样的效果，最好避免直接操作 DOM，以保持 Vue 响应式系统的优势。
