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

武帝为此2024-04-20 17:37

文章目录

- - [什么是 ref？](#什么是 ref？)
  - [什么是 $refs？](#什么是 $refs？)
  - 使用场景
  - 注意事项

什么是 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 元素的引用。

使用场景

访问子组件的实例或方法：需要直接调用子组件的方法或操作子组件的属性时，可以使用 ref 和 $refs。
直接操作 DOM 元素：需要直接操作 DOM 元素，例如修改其样式或获取其属性。
表单操作：可以使用 ref 来获取表单元素的值或者对其进行操作，例如获取输入框的值或者清空表单。

注意事项

避免过度使用：尽量避免在大型应用中过度使用 ref 和 $refs，因为它们会导致组件之间的耦合性增加，使代码难以维护。
异步访问：由于 $refs 只会在组件渲染完成后才会填充，因此如果需要在组件加载完成之前访问子组件或 DOM 元素，可能需要使用 $nextTick 或其他异步方法。
命名规范：在给 ref 命名时，使用有意义的名称，以便于代码的可读性和维护性。