vue3 - Vue3中v-for循环遍历<component></component>引入的组件为何未能加载？

Question

在vue3中，使用v-for循环遍历的方式<component></component>无法加载组件

<template><div><div v-for="item in comList " :key="item.id"><component :is="item.comName" /></div></div></template><script setup>import OneCom from "./one-com";import {ref} fromm vue;const comList = ref([{id: 1,comName:"OneCom "}])</script>

如果不通过遍历能正常加载出组件

<template><div><component is="OneCom" /></div></template><script setup>import OneCom from "./one-com";import {ref} fromm vue;const comList = ref([{id: 1,comName:"OneCom "}])</script>

Answer 1

将组件本身传递给 is 而不是其名称，则不需要注册：

import OneCom from './one-com.vue'import { ref, markRaw } from 'vue'const comList = ref([{ id: 1, comName: markRaw(OneCom) }])

如果想通过名称传递则必须先对其进行注册：

<script setup>import OneCom from './one-com.vue'import { defineComponent, ref } from 'vue'const comList = ref([{ id: 1, comName: 'OneCom' }])</script><script>export default defineComponent({  components: { OneCom }})</script>

Answer 2

Vue 3 中的 <component :is="..."> 是用于动态组件的，这意味着它的 is 属性应该绑定到一个组件对象，而不是组件的名字或字符串。在你的例子中，你试图将 item.comName（一个字符串）传递给 :is 属性，这是不正确的。

如果你想要通过名字动态加载组件，你需要使用 defineAsyncComponent 或 createApp 的 resolveComponent 方法来解析组件名并获取组件对象。然而，请注意，这需要你的组件是全局注册的，或者你需要有一个从组件名到组件对象的映射。

这是一个例子，展示了如何使用 defineAsyncComponent 来动态加载组件：

<template>  <div>    <div v-for="item in comList" :key="item.id">      <dynamic-component :component="item.comName" />    </div>  </div></template><script setup>import { defineAsyncComponent } from 'vue';import OneCom from "./one-com";import { ref } from 'vue';const comList = ref([  { id: 1, comName: OneCom }]);const DynamicComponent = {  name: 'DynamicComponent',  props: {    component: {      type: Object,      required: true    }  },  render(h) {    return h(this.component);  }};const dynamicComponent = defineAsyncComponent(() => ({  loader: () => import(`./${comList.value[0].comName}`),  loadingComponent: 'LoadingComponent',  errorComponent: 'ErrorComponent',  delay: 200,  timeout: 3000}));</script>

在这个例子中，comList 是一个对象数组，每个对象都有一个 comName 属性，该属性的值是组件对象。然后，我们创建了一个名为 DynamicComponent 的新组件，它接受一个 component 属性，并使用该属性来渲染动态组件。最后，我们使用 defineAsyncComponent 来创建一个新的异步组件，该组件在加载时会尝试导入与 comList 中的组件对象对应的组件。

请注意，这只是一个基本示例，你可能需要根据你的具体需求进行修改。例如，如果你的组件在不同的目录中，你可能需要修改 import 语句以正确地解析组件的路径。此外，你还需要处理加载和错误状态，如示例中的 LoadingComponent 和 ErrorComponent。

如果你不想使用 defineAsyncComponent，你还可以考虑使用全局注册或局部注册的组件映射来通过组件名获取组件对象。然而，这可能需要你更改你的组件注册方式，并可能使你的代码更难维护。