ref.childRef 拿不到子组件根 DOM 是因为 ref 绑定的是组件实例而非 DOM 节点；子组件需用 ref="rootEl" + defineExpose({ rootEl }) 主动暴露，父组件才能通过 childRef.value.rootEl.value 访问。
Vue 3 中，ref 本身不用于“精准定位子组件根元素”——它定位的是子组件实例，而不是其内部的 DOM 根节点。想拿到子组件最外层的 DOM 元素（比如 `
` 或 ``），不能靠父组件直接用 `ref` 绑定子组件就获得，而需要子组件主动暴露其根元素。
为什么 ref.childRef 拿不到子组件的根 DOM？
当你在父组件中这样写：
<Child ref="childRef" />
这里的 `childRef.value` 是子组件的组件实例（包含 setup 中定义的方法、暴露的属性等），不是它的根 DOM 节点。Vue 不会自动把子组件模板的根元素挂到实例上供父组件直接访问——这是封装边界的设计选择。
正确做法：子组件用 $refs + defineExpose 主动暴露根元素
子组件需做两件事：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在模板中给根元素加一个
ref（如ref="rootEl"） - 在
defineExpose中把该 ref 暴露出去
示例（子组件 Child.vue）：
<template>
<div ref="rootEl" class="child-root">
<p>我是子组件内容</p>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const rootEl = ref(null)
// 关键：暴露 DOM 引用
defineExpose({ rootEl })
</script>
父组件即可安全获取：
<template>
<Child ref="childRef" />
<button @click="focusRoot">聚焦子组件根元素</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const childRef = ref(null)
const focusRoot = () => {
if (childRef.value?.rootEl?.value) {
childRef.value.rootEl.value.focus()
}
}
</script>
进阶提示：避免时机问题
子组件的根元素只有在挂载后才存在，所以：
- 不要在
onMounted之前尝试访问childRef.value.rootEl.value - 如果需立即操作，可在子组件内部通过
onMounted暴露已就绪的 DOM，或提供封装好的方法（如focusRoot()）供父组件调用
本质上，这不是 ref 的“定位能力”问题，而是 Vue 的设计逻辑：DOM 属于组件内部实现细节，必须由子组件明确决定是否、如何、何时暴露——这保障了封装性与可维护性。
