vue3+ts 父组件调用子组件的函数

在Vue 3中，父组件调用子组件的函数可以通过使用`ref`和`ref`属性来实现。以下是一种可能的方法：

首先，在子组件中定义一个`ref`变量，并将要调用的函数赋值给它。例如，在子组件的`setup()`函数中：

import { ref } from 'vue';

export default {
  setup() {
    const childFunction = ref(() => {
      // 子组件函数的逻辑代码
    });

    return {
      childFunction
    };
  }
};

然后，在父组件中，可以通过访问子组件的实例引用，即子组件的`ref`属性，并调用其中的函数。例如：

<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildFunction">调用子组件函数</button>
  </div>
</template>

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

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

    const callChildFunction = () => {
      if (childRef.value) {
        childRef.value.childFunction();
      }
    };

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

在上述代码中，父组件通过`ref`属性将子组件的实例引用赋值给`childRef`变量。然后，当点击按钮时，调用`callChildFunction()`函数，该函数通过`childRef.value`访问子组件的实例，并调用其中的`childFunction()`函数。