动态引入vue组件

一个页面是由多个组件组合而成的，这个页面需要import多个组件，如果整个page.vue文件里面全是import不太美观，新建一个asyncLoadComp.vue组件用来动态引入组件，新建一个index.js文件用来引入所有组件文件

page.vue

<div class="components">
    <async-load-comp
      v-for="(item, index) in homeInfo"
      :componentName="item.contentTemplate"
      :dataInfo="item.dataInfo"
      :info="item.info"
      :key="index"
    ></async-load-comp>
</div>
import asyncLoadComp from '../components/asyncLoadComp';
export default {
    name: 'page',
    components:{
        asyncLoadComp
    },
    data () {
        return {
        homeInfo: [{
            contentTemplate: 'poCarousel'
        }, {
            contentTemplate: 'notice'
        }],
    };
  },
}

asyncLoadComp.vue

<script>
// 动态引入组件
import allComponents from '/index'

export default {
  render (h, cxt) {
    return h(allComponents[this.componentName], {
      props: {
        dataInfo: this.dataInfo,
        info: this.info
      }
    })
  },
  props: {
    componentName: String,
    dataInfo: Array,
    info: Array
  },
  created () {
  }
}
</script>

index.js

// 引入所有组件文件
const base = {
  poCarousel: (resolve) => {
    require(['poCarousel'], resolve)
  },
  notice: (resolve) => {
    require(['notice'], resolve)
  },
}
export default Object.assign({}, base)