vue3 动态组件传参

在Vue 3中，可以通过`ref`或`reactive`来获取动态组件实例。

如果你使用的是`<component>`标签来渲染动态组件，你可以通过`ref`来获取实例。首先，给`<component>`标签添加一个`ref`属性，并定义一个变量来存储该引用。然后，可以通过访问该引用的`value`属性来获取到动态组件的实例。

<template>
  <div>
    <component :is="currentComponent" ref="myComponent"></component>
    <button @click="getComponentInstance">获取实例</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      currentComponent: 'ChildComponent',
      myComponentRef: ref(null)
    };
  },
  methods: {
    getComponentInstance() {
      const componentInstance = this.myComponentRef.value;
      console.log(componentInstance);
    }
  }
};
</script>

如果你使用的是`<teleport>`标签（Vue 3中用于将组件渲染到指定的DOM元素中）来渲染动态组件，你可以使用`reactive`来获取实例。首先，定义一个响应式对象，然后在`<teleport>`标签上使用`v-bind`将该对象绑定到`to`属性上。最后，你可以通过访问绑定对象的属性来获取到动态组件的实例。

<template>
  <div>
    <teleport :to="teleportTarget">
      <child-component></child-component>
    </teleport>
    <button @click="getComponentInstance">获取实例</button>
  </div>
</template