Vue动态组件---component标签的运用

一、什么是动态组件
动态组件表示组件的动态化，数据化。动态组件自身是不会被渲染的，框在组件模板里，模板本身也不会被渲染，而是模板根元素被渲染。
二、运用需求
在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽说每段功能块都有批注，但是体积还是比较庞大，最近有些需求，需要将页面上的一大块筛选功能剥离开，形成单独的组件，统一数据渲染，统一组件管理，且这些功能无论是样式，或者是从结构来说，差异性都很大。其实就是将大组件再次拆分成小的组件，可需要动态组件来完成。
三、如何使用
开发过程中，将每个模块内容设置为动态呈现，为了避免使用过多的if语句，使用component 标签。

<component is="组件名"></component>
<component :is="数据"></component>
//数据===组件名（字符）===组件变量名
//page.vue
<Tag v-for="(item,index) in moduleList" :key="index" v-show="item.type === 'tool'">
  <router-link v-if="item.url && item.name!=='邮件测试'" :to="item.url">{{item.name}}</router-link>
     <component v-else :data="item" :is="toolsList[item.name]?toolsList[item.name].component:''">{{item.name}}</component>
</Tag>
//配置需要哪些模块，每一个key是一个组件，每个组件不同功能，不同样式。这些组件是否呈现在page.vue是根据后端数据动态判断的。
const toolsList = {
  "统一日志管理": {
    component: null,
    url: '/superManager/log',
    class: 'log'
  },
  "访问量统计": {
    component: null,
    url: '/superManager/visited',
    class: 'visit'
  },
  "渠道管理": {
    component: null,
    url: '/superManager/channel',
    class: 'channel'
  },
  "PMAP表": {
    component: null,
    url: '/superManager/database',
    class: 'database'
  },
  "模块管理": {
    component: null,
    url: '/superManager/moduleManage',
    class: 'moduleManage'
  },
  "模块编辑": {
    component: null,
    url: '/superManager/moduleEdit',
    class: 'moduleEdit'
  },
  "公共参数配置": {
    component: null,
    url: '/superManager/commonConfig',
    class: 'commonConfig'
  },
  "日志下载": {
    component: 'LogDownload',
    url: ''
  },
  "补偿逻辑更新": {
    component: 'CompensationLogicUpdate',
    url: ''
  },
  "邮件测试": {
    component: 'EmailTest',
    url: ''
  },
	"清除缓存":{
		component:'DeleteCache',
		url:''
	}
};