vue3特殊元素 <component>如何调用子组件暴露的方法

在 Vue3 中，<component> 特殊元素可以用来动态地渲染组件。如果你需要调用子组件暴露的方法，可以使用 `ref` 来获取子组件实例，然后通过实例来调用方法。

以下是一个示例代码：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      currentComponent: 'ChildComponent'
    }
  },
  methods: {
    callChildMethod() {
      const childComponent = this.$refs.child
      if (childComponent) {
        childComponent.childMethod()
      }
    }
  }
}
</script>

在上面的代码中，我们使用 `ref` 获取了子组件实例，并在点击按钮的时候调用了子组件的 `childMethod` 方法。注意，在调用子组件方法之前，需要进行判断子组件实例是否存在，以避免出现意外错误。