$refs 是 Vue 2 Options API 中访问子组件实例或原生 DOM 元素的方式，需配合静态字符串 ref 特性使用，在 mounted 后通过 this.$refs.xxx 获取，非响应式且不可在模板中直接使用。
在 Vue 2 的 Options API 中，$refs 是访问子组件实例或原生 DOM 元素最直接的方式。它需要配合 ref 特性使用，Vue 会在组件挂载后把对应节点或组件实例挂载到 this.$refs 对象上。
给元素或组件加 ref 特性
在模板中，给任意原生标签（如 <div>、<input>）或自定义组件添加 ref 属性，值为字符串：
<template> <div ref="container"></div> <input ref="inputField" type="text" /> <MyButton ref="btnComp" /> </template>
注意：ref 必须是静态字符串（不能用 :ref 动态绑定），否则不会被注册到 $refs 中。
在选项中通过 this.$refs 访问
在生命周期钩子（如 mounted）或方法中，可通过 this.$refs.xxx 获取对应引用：
-
this.$refs.container→ 原生HTMLElement实例（如div元素） -
this.$refs.inputField→ 原生HTMLInputElement，可直接调用.focus()、.value等 -
this.$refs.btnComp→ 子组件的 Vue 实例，可访问其data、methods、computed等（前提是这些属性/方法是公开的）
注意事项和常见问题
$refs 不是响应式的，不能在模板中直接用 {{ $refs.xxx }}；只应在 JS 逻辑中使用。
- 确保在
mounted钩子之后访问 —— 组件未挂载时$refs为空对象 - 如果
ref指向的是v-for渲染的多个元素，$refs.xxx会是一个数组（Vue 2.6+ 支持，但需手动处理） - 子组件若用了
functional: true，无法通过ref获取其实例（因为无实例） - 想让子组件暴露特定方法？可在子组件中用
vm.$emit或定义公开方法，并在父组件中调用this.$refs.btnComp.handleClick()
一个实用小例子
自动聚焦输入框并调用子组件方法：
export default {
mounted() {
this.$refs.inputField.focus();
this.$refs.btnComp.showAlert();
},
methods: {
handleClick() {
console.log('父组件调用了子组件方法');
this.$refs.inputField.select(); // 选中输入内容
}
}
}
不复杂但容易忽略：ref 名称要唯一，且只能在当前组件作用域内使用；跨组件通信优先考虑 props/events，$refs 更适合强耦合的 DOM 操作或组件内部控制。
