vue3中组件上的 ref有什么用

在 Vue 3 中，:ref 属性用于在组件中创建一个引用，并将该引用绑定到组件的实例上，以便在组件中使用该引用来访问组件的内部状态或方法。

例如，可以在组件中使用 :ref 属性来创建一个引用，然后在组件的 mounted 生命周期钩子函数中使用该引用来访问组件中的 DOM 元素，如下所示：

<template>
  <div ref="myDiv">Hello, Vue 3!</div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv.innerText); // 输出：Hello, Vue 3!
  },
};
</script>

在上面的示例中，我们使用 :ref 属性创建了一个名为 myDiv 的引用，并将其绑定到组件的 div 元素上。然后，在组件的 mounted 生命周期钩子函数中，我们使用 this.$refs.myDiv 来访问该元素，并输出其 innerText 属性。