vue3中$refs的基本使用方法

当我们需要在Vue组件中直接访问DOM元素时，可以使用Vue的特有属性$refs。在Vue3中，使用$refs的方法与Vue2中略有不同，下面我们来详细讲解vue3中$refs的使用方法。

1. 定义ref属性

要使用$refs属性，我们首先需要在需要访问DOM元素的组件中定义一个ref属性。可以在DOM元素上使用v-bind或简写的冒号来定义ref属性。例如，在Vue组件的template模板中，我们可以这样定义一个ref属性:

<template>
  <div>
    <span ref="mySpan">Hello World</span>
  </div>
</template>

在上面的代码中，我们定义了一个名为mySpan的ref属性，它指向了一个DOM元素<span>。

2. 访问ref属性

定义了ref属性后，我们就可以在Vue组件的JavaScript代码中通过$refs属性来访问这个ref属性所对应的DOM元素。Vue3中，我们可以直接使用this.$refs来访问refs。例如，在Vue组件中的methods方法中，我们可以这样访问刚刚定义的mySpan:

export default {
  mounted() {
    console.log(this.$refs.mySpan.innerText)
  }
}

在上面的代码中，this.$refs.mySpan表示访问名为mySpan的ref属性所对应的DOM元素。获取到DOM元素后，我们可以通过它的属性和方法来进行进一步的操作。例如，上面的代码中我们使用了innerText属性来获取DOM元素的文本内容，并使用console.log方法将其输出到控制台中。

示例一：获取input元素的value值

下面我们来看一个示例，在一个表单中，我们需要获取用户在input元素中输入的内容。我们可以在input元素上定义一个名为userNameInput的ref属性，然后在Vue组件的JavaScript代码中通过this.$refs.userNameInput来访问它，从而获取input元素的value值。下面是示例代码:

<template>
  <div>
    <input type="text" ref="userNameInput" v-model="userName" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: ""
    }
  },
  methods: {
    getUserInfo() {
      console.log(this.userName)
    }
  }
}
</script>

在上面的代码中，我们在input元素上定义了一个名为userNameInput的ref属性，我们在getUserInfo方法中通过console.log方法打印出了input元素的value值。在这个过程中，我们使用了Vue的数据绑定属性v-model来双向绑定了输入框中的值和Vue实例中的数据userName。

示例二：获取元素的样式和位置

除了获取DOM元素的属性，还可以获取它的样式和位置信息。比如我们想获取一个元素的左右坐标和宽度等信息，可以在元素上定义ref属性，然后通过元素的getBoundingClientRect()方法来获取元素的位置和大小信息。下面是示例代码:

<template>
  <div>
    <div ref="box" style="width:100px;height:100px;background-color:red;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const rect = this.$refs.box.getBoundingClientRect()
    console.log(rect.left, rect.right, rect.width)
  }
}
</script>

在上面的代码中，我们在一个div元素上定义了一个名为box的ref属性，然后在mounted方法中通过this.$refs.box.getBoundingClientRect()方法获取该元素的位置和大小信息，并使用console.log方法打印出了其左右坐标和宽度信息。