Vue.js中能否根据prop动态导入组件？

你的问题核心在于静态import语句无法在编译阶段解析运行时的props变量，必须改用运行时的动态导入方式。以下是两种可行实现：

方案1：Vue 2/3通用的异步组件写法 #

<template>
  <button>
    <component :is="iconComponent"></component>
  </button>
</template>

<script>
export default {
  name: 'ToolbarButton',
  props: ['icon'],
  computed: {
    iconComponent() {
      // 动态导入对应图标组件，返回异步组件
      return () => import(`./icons/${this.icon}.vue`)
    }
  }
}
</script>

这里用component标签配合动态组件特性，通过计算属性根据当前icon props动态返回异步组件，import()函数会在运行时加载对应文件。

方案2：Vue 3 Composition API 写法 #

<template>
  <button>
    <component :is="iconComponent"></component>
  </button>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'
const props = defineProps(['icon'])

const iconComponent = computed(() => {
  return defineAsyncComponent(() => import(`./icons/${props.icon}.vue`))
})
</script>

利用defineAsyncComponent包装动态导入，配合计算属性响应icon的变化，自动切换图标组件。

额外优化：处理图标不存在的情况 #

如果需要兼容传入不存在的图标名称，可以在动态导入时添加错误捕获，返回默认图标：

// Vue 2示例
iconComponent() {
  return () => import(`./icons/${this.icon}.vue`).catch(() => import('./icons/default-icon.vue'))
}

// Vue 3示例
const iconComponent = computed(() => {
  return defineAsyncComponent(() => 
    import(`./icons/${props.icon}.vue`).catch(() => import('./icons/default-icon.vue'))
  )
})

内容的提问来源于stack exchange，提问作者Štěpán Žák