vue 3+ts父调子方法

在Vue 3中使用TypeScript，可以通过`ref`和`toRefs`来实现父组件调用子组件的方法。

首先，在子组件中，你需要使用`ref`来声明一个可响应的引用类型，将子组件的方法赋值给该引用类型。然后将该引用类型通过`toRefs`转换为普通的响应式对象。

// 子组件 ChildComponent.vue
<template>
  <div>
    <button @click="childMethod">子组件按钮</button>
  </div>
</template>

<script lang="ts">
import { ref, toRefs } from 'vue';

export default {
  setup() {
    const childMethodRef = ref(() => {
      console.log("子组件方法被调用");
    });
    const childMethod = toRefs(childMethodRef);

    return {
      childMethod
    };
  }
};
</script>

然后，在父组件中，你可以通过在子组件上使用`ref`来获取子组件实例，并直接调用子组件的方法。

// 父组件 ParentComponent.vue
<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <ChildComponent ref="childRef" />
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.childMethod();
      }
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

在父组件中，使用`ref`声明了一个`childRef`，用于保存子组件实例。然后，在`callChildMethod`方法中，使用`childRef.value.childMethod()`来调用子组件的方法。

这样，你就可以在父组件中调用子组件的方法了。