vue3 获取动态组件component 实例调用里面组件的方法

在Vue3中，可以使用 `v-bind` 指令的 `.sync` 修饰符来实现父组件与子组件之间的双向绑定，从而获取子组件实例并调用子组件的方法。

首先，需要在父组件中使用 `v-bind` 指令将子组件的实例绑定到父组件的一个变量上。例如：

<template>
  <div>
    <component :is="selectedComponent" :child-instance.sync="childInstance"></component>
    <button @click="handleClick">Call Child's Method</button>
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue'
import ChildComponent2 from './ChildComponent2.vue'

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  },
  data() {
    return {
      selectedComponent: 'ChildComponent1',
      childInstance: null
    }
  },
  methods: {
    handleClick() {
      if (this.childInstance) {
        this.childInstance.doSomething()
      }
    }
  }
}
</script>

在子组件中，需要使用 `emit` 方法将子组件的实例暴露给父组件。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from ChildComponent1!'
    }
  },
  mounted() {
    this.$emit('update:childInstance', this)
  },
  methods: {
    doSomething() {
      console.log('ChildComponent1 is doing something...')
    }
  }
}
</script>

这样，父组件就可以在 `childInstance` 变量中获取到子组件的实例，并调用子组件的方法。需要注意的是，这种方式只适用于动态组件，即使用 `v-bind` 指令的 `is` 属性来动态切换组件。如果是静态组件，可以直接通过 `ref` 获取子组件实例。