Vue 中玩转 ref：让 DOM 元素和组件随叫随到

大家好，我是小杨，一个做了6年前端的老司机。今天咱们聊聊 Vue 中特别实用的 ref 属性，这个功能简直就像给你的组件装了个对讲机，随时随地都能呼叫到它们！

一、ref 是什么？为什么我们需要它？

ref 就像是 Vue 组件里的快捷拨号，让你能直接访问 DOM 元素或子组件实例。想象一下，你正在开发一个表单页面，需要自动聚焦到输入框，或者获取某个元素的高度，这时候 ref 就派上大用场了。

二、基础用法：给 DOM 元素加 ref

html 复制代码

<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="focusInput">点我聚焦输入框</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
      console.log('我让输入框获得焦点了！');
    }
  }
}
</script>

这个例子中，我们给 input 元素加了个 ref="myInput"，然后在方法里通过 this.$refs.myInput 就能直接操作这个 DOM 元素了。

三、进阶玩法：给组件加 ref

ref 不仅能用在普通 DOM 元素上，还能用在子组件上：

html 复制代码

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.sayHello();
      console.log('我调用了子组件的方法！');
    }
  }
}
</script>

这样父组件就能直接调用子组件的方法了，是不是很方便？

四、组合式 API 中的 ref

在 setup 语法中，ref 的用法稍有不同：

html 复制代码

<template>
  <div ref="divElement">这是一个div</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const divElement = ref(null);

    onMounted(() => {
      console.log('div高度:', divElement.value.offsetHeight);
      console.log('我获取到了div的高度！');
    });

    return {
      divElement
    };
  }
}
</script>

五、ref 实际应用场景

表单自动聚焦：页面加载后自动聚焦到第一个输入框
获取元素尺寸：动态计算元素宽高
调用子组件方法：比如让子组件刷新数据
集成第三方库：需要直接操作 DOM 时

六、注意事项

ref 不是响应式的，不要在模板中过度依赖它
在组件挂载完成后才能访问 $refs
避免过度使用 ref，能用 props 和事件解决的问题就不要用 ref

七、总结

ref 就像 Vue 世界里的快捷键，让我们能直接操作 DOM 或子组件。合理使用能让代码更简洁高效，但也要注意不要滥用。

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！