动态引入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)

 

发布了9 篇原创文章 · 获赞 5 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览