Vue-Component动态组件开发

前段时间遇到一个需求，一个列表 会存在很多种不同的样式与数据内容，如果用v-if依次判断，也能实现，但是比较low，

会造成代码冗余，所以通过同事的点播 ，自己查了下资料，

文档地址：https://www.javascriptc.com/vue3js/api/application-api.html#component

实际上我做好的最终效果是这样 ：

使用component 的:is=”xxx”来索引对应组件，并且展示，直接上代码吧 ：

<div v-for="(n, i) in item" :key="i">
    <component
            :is="stateComponent[n.view_type]" 
            :listData="n"
            :personData="personData"
   ></component>
</div>

export default {
  components: {
    ArchivesTask: defineAsyncComponent(() =>
      import("../archives/archivesTask.vue") //组件1
    ),
    ArchivesReport: defineAsyncComponent(() =>
      import("@/views/archives/archivesReport")//组件2
    ),
    ArchivesWeekly: defineAsyncComponent(() =>
      import("@/views/archives/archivesWeekly")//组件3
    ),
    ArchivesMonthly: defineAsyncComponent(() =>
      import("@/views/archives/archivesMonthly")//组件4
    ),
    ArchivesPlan: defineAsyncComponent(() =>
      import("@/views/archives/archivesPlan")//组件5
    ),
    ArchivesAssess: defineAsyncComponent(() =>
      import("@/views/archives/archivesAssess")//组件6
    ),
    ArchivesCollect: defineAsyncComponent(() =>
      import("@/views/archives/archivesCollect")//组件7
    ),
  },

data() {
    return {
      stateComponent: {
        训练任务: "ArchivesTask",
        训练报告_阶段: "ArchivesReport",
        训练报告_周报: "ArchivesWeekly",
        训练报告_月报: "archivesMonthly",
        训练方案: "ArchivesPlan",
        阶段评估: "ArchivesAssess",
        病历: "ArchivesCollect",
      },
      listData: {},
      tabsTitle:['全部','病历', '阶段评估','训练方案','训练任务','训练报告'],
      item:[],
    };
  },

简单说下，核心代码在这个 

<component :is="stateComponent[n.view_type]"> 
 
//获取n.view_type的value  索引映射在stateComponent内部的key值，获取value组件，并展示,
:listData="n" 是当前行的 数据信息，通常是要传递给子组件的。

把列表的每一不同类项都拆分成组件，通过component来组合 达到模块化的收益，

就是这样子了 ，在工作的过程中能不断学习 完善自己 是一件让人开心的事儿 。