Vue3动态生成组件

北风几吹夏 / 2024-07-19 / 原文

在 Vue 3 中，要遍历 funConfig 并动态生成组件，可以使用 Vue 的 defineAsyncComponent 来加载异步组件，并结合 v-for 指令在模板中进行渲染。

以下是一个示例代码来实现这个需求：

1. 配置文件

确保配置文件导出的是一个 reactive 对象：

import { reactive, markRaw, defineAsyncComponent } from 'vue';

export const funConfig = reactive([
  {
    name: '航线规划',
    icon: 'fun-route',
    show: false,
    component: markRaw(
      defineAsyncComponent(() => import('@/views/Map/components/RouteBox/index.vue')),
    ),
  },
  {
    name: '海洋气象',
    icon: 'fun-weather',
    show: false,
    component: markRaw(
      defineAsyncComponent(() => import('@/views/Map/components/SeaCurrent/index.vue')),
    ),
  },
  {
    name: '船舶过滤',
    icon: 'fun-ship',
    show: false,
    component: markRaw(
      defineAsyncComponent(() => import('@/views/Map/components/ShipBox/index.vue')),
    ),
  },
  {
    name: '港口过滤',
    icon: 'fun-port',
    show: false,
    component: markRaw(
      defineAsyncComponent(() => import('@/views/Map/components/PortBox/index.vue')),
    ),
  },
]);

2. Vue 组件

在 Vue 组件中，使用 defineAsyncComponent 来动态加载组件，并使用 v-for 指令来遍历 funConfig：

<template>
  <div>
  <component
    v-for="item in funConfig"
    v-model="item.show"
    :is="item.show ? item.component : null"
  ></component>
  </div>
</template>

<script setup>
import { funConfig } from './path/to/your/config/file';
</script>