vue3 ts 动态组件

Vue 3中使用TypeScript创建动态组件有几种方式。下面是两种常用的方法：

1. 使用`<component>`元素：Vue中的`<component>`元素可以根据提供的组件名称动态渲染组件。在TypeScript中，您可以使用`import`语句导入组件，并将其作为动态组件的选项传递给`<component>`元素。

示例如下：

   <template>
     <component :is="dynamicComponent"></component>
   </template>

   <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import MyComponent1 from './MyComponent1.vue';
   import MyComponent2 from './MyComponent2.vue';

   export default defineComponent({
     components: {
       MyComponent1,
       MyComponent2,
     },
     setup() {
       const dynamicComponent = ref('MyComponent1');

       return {
         dynamicComponent,
       };
     },
   });
   </script>

2. 使用动态引入：Vue 3与Webpack和ES模块的动态导入紧密集成，这使得您可以异步地加载组件并将其作为动态组件进行渲染。

示例如下：

   <template>
     <button @click="loadComponent">Load Component</button>
     <component v-if="loadedComponent" :is="loadedComponent"></component>
   </template>

   <script lang="ts">
   import { defineComponent, ref } from 'vue';

   export default defineComponent({
     setup() {
       const loadedComponent = ref(null);

       const loadComponent = async () => {
         const { default: component } = await import('./MyComponent.vue');
         loadedComponent.value = component;
       };

       return {
         loadComponent,
         loadedComponent,
       };
     },
   });
   </script>

这些方法允许您在Vue 3中使用TypeScript创建动态组件。您可以根据自己的需求选择适合您项目的方法。希望对您有所帮助！