vue3 $refs

Vue 3中的`$refs`是一个访问组件或DOM元素的引用的方式。你可以在模板中使用`ref`属性来为组件或DOM元素创建一个引用，并通过`$refs`来访问该引用。

在Vue 3中，`$refs`是一个响应式对象，它的值是一个包含了所有引用的对象。你可以通过在组件实例上使用`ref`函数来创建引用，例如：

<template>
  <div>
    <my-component ref="myRef"></my-component>
    <button @click="logRef">Log Ref</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  mounted() {
    console.log(this.$refs); // 输出：{ myRef: VueComponent }
  },
  methods: {
    logRef() {
      console.log(this.$refs.myRef); // 输出：VueComponent
    }
  }
}
</script>

在上面的例子中，我们使用`ref`函数来为`my-component`创建了一个引用，并命名为`myRef`。在`mounted`钩子函数中，我们可以通过`this.$refs.myRef`来访问该引用，并将其打印到控制台中。

需要注意的是，只有在组件渲染完成后，才能通过`$refs`访问引用。因此，最好将对`$refs`的访问放在生命周期钩子函数（如`mounted`）或事件处理程序中。

希望这个回答对你有帮助！如有任何问题，请随时提问。