this.$refs在vue3中使用

在Vue 3中，this.$refs仍然可以用来访问组件中的DOM元素或子组件实例。但是，与Vue 2相比，Vue 3对this.$refs的使用有一些变化。

在Vue 3中，this.$refs的使用需要在组件模板中使用ref属性来标记DOM元素或子组件。例如，如果你想引用一个DOM元素，可以这样写：

<template>
  <div>
    <button ref="myButton">Click me</button>
  </div>
</template>

然后，在组件的JavaScript代码中，你可以通过this.$refs来访问这个DOM元素：

<script>
export default {
  mounted() {
    console.log(this.$refs.myButton); // 输出DOM元素
  }
}
</script>

如果你想引用一个子组件实例，也可以使用ref属性来标记子组件，并通过this.$refs来访问它。例如：

<template>
  <div>
    <child-component ref="myChildComponent"></child-component>
  </div>
</template>

然后，在组件的JavaScript代码中，你可以通过this.$refs来访问这个子组件实例：

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
    console.log(this.$refs.myChildComponent); // 输出子组件实例
  }
}
</script>

需要注意的是，在Vue 3中，this.$refs返回的是一个响应式对象，而不再是一个DOM元素或子组件实例本身。如果你想访问DOM元素的属性或调用子组件的方法，可以通过访问this.$refs.myRef.$el来获取DOM元素，或者通过this.$refs.myRef来访问子组件实例。