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

在 Vue 3 中，可以通过 `ref` 和 `setup` 来访问子组件的实例和方法。具体步骤如下：

1. 在子组件中，通过 `defineExpose` 暴露需要在父组件中访问的方法。

例如，在子组件中定义一个 `sayHello` 方法：

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const sayHello = () => {
      console.log('Hello from child component')
    }

    // 暴露 sayHello 方法
    const exposed = {
      sayHello
    }

    // 返回暴露的接口
    return { exposed }
  }
})

2. 在父组件中，通过 `ref` 获取子组件实例，并在 `setup` 中访问子组件暴露的接口。

例如，在父组件中使用 `ChildComponent` 组件，并在 `setup` 中访问 `sayHello` 方法：

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

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    // 获取子组件实例
    const childComponentRef = ref<InstanceType<typeof ChildComponent>>()

    // 访问子组件暴露的接口
    const sayHello = () => {
      childComponentRef.value?.exposed.sayHello()
    }

    return {
      childComponentRef,
      sayHello
    }
  }
})

在模板中，可以通过 `v-bind` 将 `childComponentRef` 绑定到子组件的 `ref` 上，以便在 `setup` 中获取子组件实例：

<template>
  <ChildComponent ref="childComponentRef" />
  <button @click="sayHello">Say Hello</button>
</template>

需要注意的是，由于 `childComponentRef` 是一个响应式对象，因此需要使用 `.value` 访问其实际值。而在访问 `exposed` 属性时，需要使用可选链运算符 `?.`，以避免在子组件还未挂载时访问未定义的属性。