Vue3 はコンポーネントを動的にロードします

1. 原則: コンポーネントの動的なレンダリングを実現するにはコンポーネントを使用します。レンダリングされる実際のコンポーネントは prop によって決定されます。

• is が文字列の場合、HTML タグ名またはコンポーネントのレジストリ名のいずれかになります。
• あるいは、コンポーネント定義に直接バインドすることもできます。
• 組み込みコンポーネントは is に渡すことができますが、名前で渡したい場合は、最初に登録する必要があります。
• 名前の代わりにコンポーネント自体を is に渡す場合、登録は必要ありません。
  Vue 公式ドキュメント - コンポーネント組み込み動的コンポーネント

2. コードの実装

アイデア: ページにコンポーネントを登録し、コンポーネントとコンポーネント名を使用して動的なレンダリングを実現します。

<component :is="dialogComponents.get(componentName)" :key="componentName"></component>

<script lang="ts" setup>
import {
    
     ref, defineAsyncComponent } from 'vue'
const componentName = ref('') //保存需要加载的的组件名称
const dialogComponents = ref(new Map<string, any>())
dialogComponents.value.set(
	'OfficialWebsite',
	defineAsyncComponent(() => import('./components/OfficialWebsite.vue'))
)
dialogComponents.value.set(
	'InterfacePlatform',
	defineAsyncComponent(() => import('./components/InterfacePlatform/index.vue'))
)
</script>