vue3 $refs的用法

在Vue 3中，`$refs` 是一个用于访问组件或DOM元素的实例的特殊属性。它可以让你直接访问组件实例或DOM元素，以便进行操作或获取其属性。

使用 `$refs` 的一般步骤如下：

1. 在模板中给组件或DOM元素添加 `ref` 特性：

<template>
  <div>
    <my-component ref="myRef"></my-component>
    <div ref="myDomRef">Hello, world!</div>
  </div>
</template>

2. 在组件的方法或生命周期钩子函数中使用 `$refs` 来访问组件实例或DOM元素：

export default {
  mounted() {
    const componentInstance = this.$refs.myRef // 访问组件实例
    const domElement = this.$refs.myDomRef // 访问DOM元素

    // 对组件实例进行操作
    componentInstance.doSomething()

    // 获取DOM元素的属性
    const textContent = domElement.textContent
    console.log(textContent)
  }
}

在上面的代码中，`ref="myRef"` 将组件实例存储在 `$refs` 对象中的 `myRef` 属性中，而 `ref="myDomRef"` 则将DOM元素存储在 `$refs` 对象中的 `myDomRef` 属性中。

需要注意的是，当在`mounted`钩子函数中访问 `$refs` 时，确保目标组件已经挂载完成，否则可能会得到 `undefined` 值。如果需要在其他生命周期钩子函数中访问 `$refs`，请确保在合适的时机。

总之，`$refs` 是一个方便的属性，可以让你直接访问组件实例或DOM元素。但是，尽量避免在模板中过度使用 `ref`，因为过多的 `ref` 可能会导致代码难以维护和理解。