vue3+ts父组件调用子组件方法

在 Vue3 中，你可以通过 `ref` 和 `setup` 函数来获取子组件实例，并且调用其方法。

假设你有一个父组件 `Parent` 和一个子组件 `Child`，需要在父组件中调用 `Child` 组件的方法，可以按照以下步骤进行：

1. 在子组件中，使用 `ref` 创建一个引用：

<template>
  <div>子组件</div>
</template>

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

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

    const childMethod = () => {
      console.log('子组件方法被调用了');
    };

    return {
      childRef,
      childMethod,
    };
  },
});
</script>

在 `setup` 函数中，我们创建了一个名为 `childRef` 的引用，并将其初始化为 `null`。在 `childMethod` 中，我们定义了一个子组件的方法，用于在父组件中调用。

2. 在父组件中，使用 `ref` 创建一个引用，并在 `onMounted` 生命周期钩子函数中通过 `childRef.value` 获取子组件实例：

<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
    <Child ref="childRef"></Child>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import Child from './Child.vue';

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

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

    onMounted(() => {
      childRef.value = childRef.value.$refs.child;
    });

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

在 `setup` 函数中，我们创建了一个名为 `childRef` 的引用，并将其初始化为 `null`。在 `callChildMethod` 中，我们通过 `childRef.value` 获取子组件实例，并调用其 `childMethod` 方法。在 `onMounted` 生命周期钩子函数中，我们通过 `childRef.value.$refs.child` 获取子组件实例，并将其存储在 `childRef.value` 中。

注意，我们在父组件模板中使用了 `Child` 组件，并将其通过 `ref` 绑定到了 `childRef` 引用上。在 `onMounted` 生命周期钩子函数中，我们可以通过 `childRef.value.$refs.child` 获取到子组件实例。这里的 `child` 是子组件模板中的 `ref` 名称，用于获取子组件实例。

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