vue3父组件调用子组件方法

在Vue3中，可以通过`ref`和`setup`来获取子组件实例，并调用其方法。

首先，在子组件中，需要使用`ref`将子组件实例暴露给父组件：

<template>
  <div>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const childInstance = ref(null)
    const callChildMethod = () => {
      childInstance.value.childMethod()
    }
    return {
      childInstance,
      callChildMethod
    }
  }
}
</script>

在父组件中，可以通过`ref`获取子组件实例，然后调用其暴露的方法：

<template>
  <div>
    <my-component ref="child"></my-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
export default {
  components: {
    MyComponent
  },
  setup() {
    const child = ref(null)
    const callChildMethod = () => {
      child.value.childMethod()
    }
    return {
      child,
      callChildMethod
    }
  }
}
</script>

需要注意的是，在Vue3中，`this.$refs`已经被移除了，需要使用`ref`来获取子组件实例。同时，需要在子组件中使用`ref`将子组件实例暴露给父组件。