vue3调用子组件的函数

在 Vue3 中，可以通过 `ref` 和 `appContext` 来访问子组件的函数。

首先，在子组件中要将需要访问的函数通过 `setup()` 暴露出来，例如：

<template>
  <div>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  setup() {
    const handleClick = () => {
      console.log('点击了按钮')
    }
    return {
      handleClick
    }
  }
}
</script>

然后，在父组件中，可以通过 `ref` 获取子组件实例，并通过 `appContext` 访问子组件的函数，例如：

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

<script>
import { ref } from 'vue'

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

    const handleChildClick = () => {
      const child = childRef.value
      if (child) {
        child.$_emit('handleClick')
      }
    }

    return {
      childRef,
      handleChildClick
    }
  }
}
</script>

在父组件中，我们通过 `ref` 获取子组件实例，并在点击按钮时调用 `handleChildClick` 函数。在 `handleChildClick` 函数中，我们可以通过 `childRef.value` 获取子组件实例，然后通过 `child.$_emit('handleClick')` 调用子组件中暴露出来的 `handleClick` 函数。注意，在调用子组件函数时，需要使用 `$emit` 方法来触发子组件的事件。