动态引入vue组件

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

page.vue

<div class="components"><async-load-compv-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)