vue3中<component/>组件上如何添加ref

在Vue 3中，可以使用`ref`指令来为组件添加引用。具体来说，可以在`<component/>`标签上使用`v-bind`指令动态绑定`ref`属性，例如：

<component :is="currentComponent" v-bind:ref="myComponentRef"></component>

这样就会将当前渲染的组件添加到名为`myComponentRef`的引用中。需要注意的是，`myComponentRef`必须是在组件的模板中声明的一个响应式变量，例如：

<template>
  <div>
    <component :is="currentComponent" v-bind:ref="myComponentRef"></component>
  </div>
</template>

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

export default {
  setup() {
    const myComponentRef = ref(null);
    const currentComponent = ref('my-component');

    return {
      myComponentRef,
      currentComponent,
    };
  },
};
</script>

在上面的示例中，我们使用了Vue 3的`setup()`函数来定义组件逻辑，并且使用`ref()`函数来创建响应式变量`myComponentRef`。然后，在组件模板中，我们将`myComponentRef`绑定到`<component/>`组件的`ref`属性上，这样就可以在组件逻辑中通过`myComponentRef.value`来访问当前渲染的组件了。