vue resolveDynamicComponent的使用

遇到这种情况，每个卡片的布局一致，只有内容不一致

使用resolveDynamicComponent动态解析组件

这几个组件里的内容写在对应的views的component文件夹下

对应的ts写出对应的标题和详情页配置

import { reactive } from 'vue';
import runSituation from '../monitor/runSituation';
import productionMonitor from '../monitor/productionMonitor';
import separation from '../monitor/separation';
import plantYield from '../monitor/plantYield';
import rockYield from '../monitor/rockYield';
import alarmMonitor from '../monitor/alarmMonitor';

export const coms = [
  runSituation,
  productionMonitor,
  separation,
  plantYield,
  rockYield,
  alarmMonitor,
];

const cards = reactive<{
  list: Array<{
    name: string;
    com: string;
    more?: boolean;
    url?: string;
    num1?: string;
    num2?: string;
  }>;
}>({
  list: [
    {
      com: 'runSituation',
      name: '运行概况',
      more: true,
      url: '/chartDetail/time',
      num1: 'runTime',
      num2: 'stopTime',
    },
    {
      com: 'productionMonitor',
      name: '生产监控',
    },
    {
      com: 'separation',
      name: '分选入料',
      more: true,
      url: '/chartDetail/feeding',
      num1: 'feedingValue',
    },
    {
      com: 'plantYield',
      name: '精煤产量',
      more: true,
      url: '/chartDetail/cleanCoal',
      num1: 'cleanCoalValue',
      num2: 'cleanCoalRate',
    },
    {
      com: 'rockYield',
      name: '矸石产量',
      more: true,
      url: '/chartDetail/waste',
      num1: 'wasteValue',
      num2: 'wasteRate',
    },
    {
      com: 'alarmMonitor',
      name: '报警监控',
      url: 'alarm',
      more: true,
    },
  ],
});

export default cards;

组件注册在global或者在main.ts里导入

import { coms } from '@/components/cards/index';
export default (app: App): void => {
  app.config.globalProperties.$vitevuu = vitevuu;
  app.use(vitevui).use(Vant).use(router);
  // new VConsole();
  app.component('module', module);
  app.component('card', card); 
  for (const i of coms) { //组件注册
    app.component(`${i.name}`, i);
  }
};

 使用：在主页渲染

import { defineComponent, onMounted, resolveDynamicComponent } from 'vue';
import cards from '@/components/cards';
import monitorHeader from '@/components/header';
import { useRouter } from 'vue-router';
import store from '@/_store';

export default defineComponent({
  components: { monitorHeader },

  setup() {
    onMounted(() => {
      store.dispatch('getAlarmDetail');
      const h = localStorage.getItem('scrollY');// 进入详情页返回后保持在原来的位置
      window.scrollTo(0, Number(h));
    });

    const router = useRouter();
    router.beforeEach(() => {
      localStorage.setItem('scrollY', `${window.scrollY}`);
    });
    return () => (
      <div>
        <monitorHeader name='数据看板' />
        {cards.list.map((item) => {
          const cardBody = resolveDynamicComponent(`${item.com}`);
          return (
            <module
              title={item.name}
              url={item.url}
              more={item.more}
              num1={item.num1}
              num2={item.num2}
            >
              <div style='padding:0 0.5rem'>
                
                <cardBody /> // 这里就是卡片的内容
              </div>
            </module>
          );
        })}
      </div>
    );
  },
});