Vue3动态生成组件

在 Vue 3 中，要遍历 funConfig 并动态生成组件，可以使用 Vue 的 defineAsyncComponent 来加载异步组件，并结合 v-for 指令在模板中进行渲染。
以下是一个示例代码来实现这个需求：

1. 配置文件

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

import { reactive } from 'vue';

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

2. Vue 组件

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

<template>
  <div>
    <div v-for="(item, index) in funConfig" :key="index">
      <button @click="toggleShow(index)">
        <span :class="item.icon"></span>
        {{ item.name }}
      </button>
      <component :is="item.show ? item.component : null"></component>
    </div>
  </div>
</template>

<script>
import { defineComponent, defineAsyncComponent } from 'vue';
import { funConfig } from './path/to/your/config/file';

export default defineComponent({
  name: 'DynamicComponentLoader',
  setup() {
    // 包装组件，防止 component 属性不是函数时报错
    funConfig.forEach(item => {
      if (typeof item.component === 'function') {
        item.component = defineAsyncComponent(item.component);
      }
    });

    const toggleShow = (index) => {
      funConfig[index].show = !funConfig[index].show;
    };

    return {
      funConfig,
      toggleShow
    };
  }
});
</script>

解释

1. 配置文件：确保 component 属性是一个函数，它返回一个动态导入组件的 Promise。
2. 组件模板：使用 v-for 来遍历 funConfig 数组，并使用 <component :is="..."> 动态渲染组件。
3. 包装组件：在 setup 函数中，使用 defineAsyncComponent 包装 component 属性，确保它们都是异步组件。
4. 显示/隐藏逻辑：使用一个简单的 toggleShow 方法来控制 show 属性，从而控制组件的显示和隐藏。

这样，就可以根据配置文件动态生成并渲染页面组件了。