Vue 3 从字符串动态加载组件

Question

尝试基于字符串动态加载组件。

应该是这个样子：

<component v-for="component in components" :is="eval(component)" />

但不幸的是，这是行不通的。

我现在使用的解决方法是创建一个 function 返回组件：

<script setup>
import BarChart from '@/components/BarChart.vue'

const components = ['BarChart']

const stringToComponent = component => {
  return eval(component)
}
</script>

<template>
  <component v-for="component in components" :is="stringToComponent(component)" />
</template>

为什么直接调用 eval 不起作用，是否可以避免创建 function？

Answer 1

将组件添加到数组而不定义为字符串const components = [BarChart] ：

<script setup>
import BarChart from '@/components/BarChart.vue'

const components = [BarChart]

</script>

<template>
  <component v-for="component in components" :is="component" />
</template>