vue 动态组件的使用

通过is属性动态渲染组件 

<template>
  <div class="tabs-select">
    <a-tabs :default-active-key="defaultActiveKey" size="small">
      <a-tab-pane
        v-for="item in tabs"
        :key="item.key"
        :tab="item.tab"
        :force-render="true"
      >
        <component
          :is="item.key"
          :type="type"
          :provinces-prop="provincesProp"
          :date-time="dateTime"
          :deleted-props="deletedProps"
          @selectProps="selectProps($event, item.key)"
        />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

js 文件中引入component

<script>
import { tabs } from './config'

const tabComponents = {}

for (let i = 0; i < tabs.length; i++) {
  tabComponents[tabs[i].key] = tabs[i].import
}

export default {
  name: 'Tabs',
  components: tabComponents,
  props: {
    type: {
      type: String,
      default: ''
    },
    deletedProps: {
      type: Object,
      default: () => {
        return {}
      }
    },
    provincesProp: {
      type: Array,
      default: () => {
        return []
      }
    },
    dateTime: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabs
    }
  },
  computed: {
    defaultActiveKey() {
      return this.tabs[0].key
    }
  },
  watch: {},
  mounted() {},
  beforeDestroy() {
    this.$store.commit('severe/setSelectedProps', {})
  },
  methods: {
    selectProps(val, key) {
      this.$emit('selectProps', val, key)
    }
  }
}
</script>

对应的config文件

const tabs = [
  {
    key: 'publicWarn',
    tab: '预警信号',
    import: () => import('./Warning/index')
  },
  {
    key: 'obsStation',
    tab: '气象站',
    import: () => import('./Station/index')
  },
  {
    key: 'lightning',
    tab: '雷电',
    import: () => import('./Thunder/index')
  },
  {
    key: 'firePoint',
    tab: '山火',
    import: () => import('./Fire/index')
  },
  {
    key: 'satellite',
    tab: '卫星',
    import: () => import('./Satellite/index')
  },
  {
    key: 'radar',
    tab: '雷达',
    import: () => import('./Radar/index')
  }
]

export { tabs }

注：可以使用 <keep-alive> - 组件切换保留数据 （此处没有使用）

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们