Vue.js动态组件：如何从app.vue组件数组按需访问并展示组件

1. 定义组件数组并导入组件 #

首先在App.vue中，把需要动态管理的组件导入，整理成包含组件标识和实例的数组。如果组件数量极多，推荐用异步导入优化性能：

<script setup>
// 同步导入（组件数量少时用）
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'

// 异步导入（组件数量多时推荐，按需加载）
// const ComponentA = () => import('./components/ComponentA.vue')
// const ComponentB = () => import('./components/ComponentB.vue')
// const ComponentC = () => import('./components/ComponentC.vue')

// 组件数组：每个元素包含用于选择的标识、显示名称和组件实例
const componentList = [
  { key: 'componentA', label: '组件A', component: ComponentA },
  { key: 'componentB', label: '组件B', component: ComponentB },
  { key: 'componentC', label: '组件C', component: ComponentC }
]
</script>

2. 实现组件选择与动态渲染 #

定义响应式变量保存当前选中的组件，通过Vue内置的<component>标签动态渲染组件，同时添加选择控件供用户切换：

<script setup>
import { ref } from 'vue'
// 上述导入和componentList定义...

// 响应式变量：当前选中组件的标识（默认选第一个）
const selectedComponentKey = ref(componentList[0].key)
// 当前要渲染的组件实例
const currentComponent = ref(componentList[0].component)

// 切换组件的方法
const switchComponent = (key) => {
  const target = componentList.find(item => item.key === key)
  if (target) {
    selectedComponentKey.value = key
    currentComponent.value = target.component
  }
}
</script>

<template>
  <div class="component-manager">
    <!-- 下拉选择器切换组件 -->
    <select v-model="selectedComponentKey" @change="switchComponent(selectedComponentKey)">
      <option v-for="item in componentList" :key="item.key" :value="item.key">
        {{ item.label }}
      </option>
    </select>

    <!-- 或用按钮组切换（视觉更直观） -->
    <div class="button-group">
      <button 
        v-for="item in componentList" 
        :key="item.key" 
        @click="switchComponent(item.key)"
        :class="{ active: selectedComponentKey === item.key }"
      >
        {{ item.label }}
      </button>
    </div>

    <!-- 动态渲染选中的组件 -->
    <div class="component-container">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<style scoped>
.button-group {
  margin: 1rem 0;
}
.button-group button {
  margin-right: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.button-group button.active {
  background-color: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
}
.component-container {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

3. 批量导入优化（组件极多时用） #

如果components文件夹下的组件命名规则统一，可用Vite的glob功能自动批量导入，无需手动逐个添加：

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

// 批量导入components文件夹下所有.vue组件
const componentModules = import.meta.glob('./components/*.vue')

// 转换为统一格式的组件数组
const componentList = await Promise.all(
  Object.keys(componentModules).map(async (path) => {
    // 从文件路径提取组件名称
    const label = path.match(/\/([^/]+)\.vue$/)[1]
    const key = label.toLowerCase()
    // 加载组件实例
    const component = (await componentModules[path]()).default
    return { key, label, component }
  })
)

// 初始化选中状态
const selectedComponentKey = ref(componentList[0]?.key || '')
const currentComponent = ref(componentList[0]?.component || null)

const switchComponent = (key) => {
  const target = componentList.find(item => item.key === key)
  if (target) {
    selectedComponentKey.value = key
    currentComponent.value = target.component
  }
}
</script>

内容的提问来源于stack exchange，提问作者Göksel Karagöz