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

相关推荐
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙11 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端11 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧11 小时前
Promise 的使用
前端·javascript