Vue 3 + TypeScript：使用 ref 获取组件实例

在 Vue 3 中，可以使用 'ref' 函数来给组件定义 'ref' 属性，从而可以获取到组件实例。

首先，需要在组件的定义中使用 'defineComponent' 函数来创建组件。然后，可以使用 'ref' 函数来创建一个 'ref' 对象，将组件实例赋值给该对象。最后，可以通过 'value' 属性来获取到组件实例。

下面是一个示例：

import { defineComponent, ref, Ref } from 'vue';

export default defineComponent({
  setup() {
    const componentRef: Ref<any> = ref(null);

    // 在组件的生命周期钩子中将组件实例赋值给 ref 对象
    const onMounted = () => {
      componentRef.value = this;
    };

    return {
      componentRef,
      onMounted,
    };
  },
});

在上面的示例中，我们通过 'ref' 函数创建了一个名为 'componentRef' 的 'ref' 对象，并将其赋值为 'null'。然后，在组件的生命周期钩子函数 'onMounted' 中，将组件实例赋值给 'componentRef.value'。最后，将 'componentRef' 对象和 'onMounted' 函数返回，以便在组件的模板中使用。

要在模板中获取到组件实例，可以使用 'componentRef.value' 来访问。

注意：在 Vue 3 中，使用 'setup' 函数来定义组件的逻辑，而不再使用 Vue 2 中的选项 API（如 'data'、'methods' 等）。