vue3父组件怎么调用子组件的函数

在 Vue3 中，要调用子组件的函数，需要使用 `ref`。具体步骤如下：

1. 在子组件中，使用 `defineExpose` 将需要暴露给父组件调用的函数暴露出来。

例如，在子组件中定义一个名为 `childFn` 的函数：

<script>
  import { defineComponent, defineExpose } from 'vue'

  export default defineComponent({
    setup() {
      const childFn = () => {
        console.log('子组件中的函数被调用')
      }

      defineExpose({
        childFn
      })

      return {}
    }
  })
</script>

2. 在父组件中，使用 `ref` 引用子组件，并通过 `value` 获取子组件实例。

例如，在父组件中，引用名为 `childComponent` 的子组件：

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

<script>
  import { defineComponent, ref } from 'vue'
  import ChildComponent from './ChildComponent.vue'

  export default defineComponent({
    components: {
      ChildComponent
    },
    setup() {
      const childComponent = ref(null)

      const callChildFn = () => {
        childComponent.value.childFn()
      }

      return {
        childComponent,
        callChildFn
      }
    }
  })
</script>

3. 在父组件中，调用子组件暴露出来的函数。

例如，在父组件中定义一个名为 `callChildFn` 的函数，通过 `childComponent.value.childFn()` 调用子组件中的 `childFn` 函数。

注意，这里使用了 `ref` 来获取子组件实例，因此需要使用 `childComponent.value` 来访问子组件的属性和方法。