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

相关推荐
vipbic2 分钟前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年4 分钟前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala7 分钟前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen200811 分钟前
前端-ES6-11
前端·es6
菜鸟una1 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年1 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js2 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
文火冰糖的硅基工坊2 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088502 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili2 小时前
用 Tinymce 打造智能写作
前端