Vue.js基于数组列表动态渲染组件的实现求助

你的代码报错核心原因是Vue不支持直接用变量作为组件标签名，必须使用内置的<component>组件配合:is属性来指定要渲染的组件。另外，组件名的映射也需要注意匹配，下面给出两种可行的修正方案：

方案一：通过组件名映射渲染 #

这种方式适合需要保留组件名配置的场景，只需修改模板和调整组件名的对应关系：

<template>
  <!-- 使用Vue内置的component组件，通过:is指定要渲染的组件 -->
  <div v-for="(ob, i) in list" :key="i">
    <component :is="ob.componentName" :title="ob.title"></component>
  </div>
</template>

<script>
import componentA from "..."
import componentB from "..."
import componentC from "..."

export default {
  components: {
    componentA,
    componentB,
    componentC
  },
  data() {
    return {
      list: [
        // 这里的componentName要和注册的组件名一致（驼峰或短横线都可以，Vue会自动转换）
        { title: "A", componentName: "componentA" },
        { title: "B", componentName: "componentB" },
        { title: "C", componentName: "componentC" }
      ]
    };
  }
}
</script>

说明：Vue会自动处理组件名的驼峰与短横线转换，所以如果你想保留component-a这种命名，也可以把注册的组件名改成短横线形式：

components: {
  'component-a': componentA,
  'component-b': componentB,
  'component-c': componentC
}

此时list里的componentName就可以保持"component-a"不变。

方案二：直接存储组件对象（更简洁） #

这种方式跳过组件名映射，直接在列表中存储导入的组件对象，逻辑更直观：

<template>
  <div v-for="(ob, i) in list" :key="i">
    <component :is="ob.component" :title="ob.title"></component>
  </div>
</template>

<script>
import componentA from "..."
import componentB from "..."
import componentC from "..."

export default {
  data() {
    return {
      list: [
        { title: "A", component: componentA },
        { title: "B", component: componentB },
        { title: "C", component: componentC }
      ]
    };
  }
}
</script>

说明：这种方式不需要在components选项中注册组件，直接把组件对象传给:is即可，代码更简洁，适合组件数量较多的场景。

关键注意点 #

• 必须使用<component :is="...">来动态渲染组件，不能直接用变量作为标签
• 循环渲染时一定要加:key属性，避免Vue虚拟DOM渲染异常
• 如果用组件名映射，确保componentName和注册的组件名一致（Vue支持驼峰和短横线的自动转换，但尽量保持统一减少混淆）

内容的提问来源于stack exchange，提问作者ricky.ricky