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

相关推荐
我在北京coding29 分钟前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机1 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人1 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景1 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘2 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾2 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉2 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。2 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~3 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel