vue3 调用子组件的方法

在 Vue3 中，可以使用 `ref` 和 `setup` 来访问子组件的方法。

首先，在子组件中，需要使用 `defineExpose` 方法将需要暴露给父组件的方法暴露出来。例如：

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  // 暴露 increment 方法
  setup(props, { expose }) {
    expose({ increment: () => this.increment() })
  }
}
</script>

然后，在父组件中，使用 `ref` 获取子组件的实例，并通过访问 `.value` 属性来调用子组件的方法。例如：

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="handleClick">Call Child's Increment Method</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childComponentRef = ref(null)
    const handleClick = () => {
      childComponentRef.value.increment()
    }
    return {
      childComponentRef,
      handleClick
    }
  }
}
</script>

这样，点击按钮后，就会调用子组件的 `increment` 方法。