【使用 Vue 的 ref 和 $refs 进行 DOM 操作】

文章目录

什么是 ref?

ref 是 Vue 提供的一个用于给子组件或 DOM 元素注册引用的特殊属性。通过 ref在父组件中直接访问子组件或 DOM 元素,并对其进行操作。

html 复制代码
<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
}
</script>

<input> 元素添加了一个 ref,命名为 inputRef。然后在 focusInput 方法中,通过 this.$refs.inputRef 来访问该元素,并调用了 focus() 方法,使其获得焦点。

什么是 $refs?

refs 是一个对象,它包含了注册在组件上的所有 ref。通过 refs在 Vue 实例中直接访问这些引用,并对其进行操作。

$refs 只会在组件渲染完成后才会填充,并且只会包含直接子组件或 DOM 元素的引用。

使用场景

  1. 访问子组件的实例或方法:需要直接调用子组件的方法或操作子组件的属性时,可以使用 ref 和 $refs。

  2. 直接操作 DOM 元素:需要直接操作 DOM 元素,例如修改其样式或获取其属性。

  3. 表单操作:可以使用 ref 来获取表单元素的值或者对其进行操作,例如获取输入框的值或者清空表单。

注意事项

  1. 避免过度使用:尽量避免在大型应用中过度使用 ref 和 $refs,因为它们会导致组件之间的耦合性增加,使代码难以维护。

  2. 异步访问:由于 refs 只会在组件渲染完成后才会填充,因此如果需要在组件加载完成之前访问子组件或 DOM 元素,可能需要使用 nextTick 或其他异步方法。

  3. 命名规范:在给 ref 命名时,使用有意义的名称,以便于代码的可读性和维护性。

相关推荐
Apifox7 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952712 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据30 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿35 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox