Vue.js中使用v-for渲染动态component组件不生效如何解决

渲染失败是两个问题共同导致的：

• 你只通过import引入了Test组件，但没有在当前组件的components选项中完成注册，Vue无法将字符串'Test'和引入的组件做关联，会默认把它当成未知原生标签处理，最终只渲染出空的<test></test>节点。
• 你贴出的模板代码存在语法错误：根<template>标签没有正确闭合，结尾误写为开标签<template>，而非对应的闭合标签</template>，会直接引发模板编译异常。

方案1：注册组件后使用字符串名称绑定 #

在组件导出配置中新增components字段注册引入的Test组件，Vue就能正常识别字符串形式的组件名：

<template>
    <component 
        v-for="(section, index) in compo" 
        :key="index" 
        :is="section" 
        title="Gd" 
    />
</template>

<script>
import Test from "@/Components/Test.vue";
export default {
  components: {
    Test
  },
  data() {
      return {
          compo: ['Test']
      }
  },
};
</script>

方案2：直接绑定组件对象，无需额外注册 #

动态组件的:is属性支持直接接收组件构造对象，你可以把引入的Test组件直接存入数组，不需要做注册操作：

<template>
    <component 
        v-for="(section, index) in compo" 
        :key="index" 
        :is="section" 
        title="Gd" 
    />
</template>

<script>
import Test from "@/Components/Test.vue";
export default {
  data() {
      return {
          compo: [Test]
      }
  },
};
</script>

如果调整后还是无法正常渲染，依次检查以下配置：

• 确认@/Components/Test.vue的文件路径正确，Test组件本身无语法问题，可以独立正常渲染
• 若使用Vue3，注意组件命名的大小写映射规则，注册名和:is绑定的字符串名称保持一致
• 不要用section+index作为key值，直接使用数组索引或者组件自带的唯一标识即可，避免拼接值异常引发diff渲染错误

内容的提问来源于stack exchange，提问作者Hothaifa jaber