vue3 ts ref 调用子组件

在Vue 3中使用TypeScript和`ref`来调用子组件的方法，你可以按照以下步骤进行操作：

1. 首先，在父组件中引入子组件并注册它：

import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  // ...
});

2. 在父组件中创建一个`ref`对象，用于引用子组件的实例：

import { ref } from 'vue';
// ...

export default defineComponent({
  setup() {
    const childRef = ref(null);

    return {
      childRef
    };
  },
  // ...
});

3. 在子组件上添加`ref`属性，并将其与父组件中的`childRef`进行绑定：

<template>
  <div ref="childRef">
    <!-- 子组件内容 -->
  </div>
</template>

<script>
import { defineComponent, toRef } from 'vue';

export default defineComponent({
  props: {
    // ...
  },
  setup(props, { emit, refs }) {
    const childRef = toRef(refs, 'childRef');

    // 在需要的地方使用 childRef 调用子组件的方法
    // ...

    return {
      // ...
    };
  },
  // ...
});
</script>

通过以上步骤，在父组件中使用`childRef`即可调用子组件的方法。注意，这里使用了`toRef`函数来创建一个响应式引用，以便在子组件中直接使用该引用。