详解vue 动态加载并注册组件且通过 render动态创建该组件

基于 iview tabs 组件实现

功能：为每个 tab 动态创建不同的、特定的组件内容，而不需要大量的 import 组件并进行 component 注册

index.vue

<template>
  <div class="content-left-menu">
    <div class="item-contain layout-content">
      <tabs class="cmcc-ivu-tab2" type="card" closable>
        <tabpane v-for="k in zj" :label="k.label" >
          <loader :vuename="k.vuename"></loader>
        </tabpane>
      </tabs>
    </div>
  </div>
</template>
<script>

 import loader from './entryloader.vue'

  export default {
    components: {loader},
    data() {
      return {
        zj:[
          {label:'tab1',vuename:'workflow/index'},
          {label:'tab2',vuename:'workflow/index2'},
          {label:'tab3',vuename:'workflow/index3'}
        ]
      }
    }
  }
</script>
entryloader.vue

<script>
  export default {
    props: ['vuename'],
    data() {
      return {}
    },
    created() {
      this.$options.components[this.vuename] = require('@/components/' + this.vuename + '.vue')
    },
    render: function (createelement) {
      return createelement(this.vuename)
    }
  }
</script>

总结

以上所述是小编给大家介绍的vue 动态加载并注册组件且通过 render动态创建该组件,希望对大家有所帮助