vue3父组件如何调用子组件中的方法

在Vue3中，可以通过`ref`和`$refs`来实现父组件调用子组件中的方法。具体步骤如下：

1. 在子组件中，使用`ref`定义一个变量，并将其绑定到子组件的根元素上，例如：

<template>
  <div ref="childRef">
    <!-- 子组件内容 -->
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const childRef = ref(null) // 定义一个ref变量，并将其初始值设为null
    // 子组件其他逻辑
    return {
      childRef // 将childRef暴露给父组件
    }
  },
  methods: {
    childMethod() {
      // 子组件方法
    }
  }
}
</script>

2. 在父组件中，使用`$refs`获取子组件的`ref`，并调用子组件中的方法，例如：

<template>
  <div>
    <ChildComponent ref="childComponentRef" />
    <!-- 父组件其他内容 -->
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponentRef.childRef.value.childMethod() // 调用子组件中的childMethod方法
    }
  }
}
</script>

在上述代码中，`this.$refs.childComponentRef`获取到的是子组件的实例，`childRef.value`获取到的是子组件的根元素，`childMethod()`即为子组件中的方法。