【使用 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 命名时,使用有意义的名称,以便于代码的可读性和维护性。

相关推荐
li35744 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj5 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel5 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel5 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky6 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵6 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld6 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记6 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷8 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求