需求是 首先通過一個(gè)異步的方式獲取一個(gè)組件名稱的列表，然后根據(jù)這個(gè)列表（字符串?dāng)?shù)組形式）加載這個(gè)列表上的組件，然后循環(huán)顯示在頁面上

先上代碼吧：第一種

<template>
  <div class="pageconfig">
    <!-- :gutter="dataArr.layout.gutter" -->

    <el-row :gutter="layout.gutter">
      <el-col :span="itme.span" v-for="(itme,index) in col" :key="index">
        <div class="grid-content bg-purple-dark" >
          <component 
          :is="plugItem" 
          v-for="(plugItem, plugIndex) in plugs" 
          :key="plugIndex"
          ></component>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
//import '../../uitl/pageConfig.js';
//require
import http from '@/api'
import { PageConfig } from '@/api/url.js'
export default {
  data () {
    return {
      layout: "",
      col: "",
      plugs:[]
    };
  },
  created () {
   
    const _this = this
    http.post(PageConfig, {}, _this).then(res => {
      if (res.code == 0) {
        console.log(res.data)
        _this.layout = res.data.layout
        _this.col = res.data.layout.col
        console.log(_this.layout, "00000----------")
         _this.plugs = []
        res.data.layout.col.forEach(item => {
       //主要是一下這句話
        _this.plugs.push(() => import(`../common/${item.PlugInUnit}`))
      })
       
      }

    }).catch(function (error) {
      _this.$message.error(error);
    });
  },
  computed: {
  },
  methods: {
    
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-top: 20px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

主要代碼如下：

 _this.plugs.push(() => import(`../common/${item.PlugInUnit}`))

聲明變量，然后獲取組件信息，進(jìn)行組件導(dǎo)入：在template體中循環(huán)組件

<component 
:is="plugItem" 
v-for="(plugItem, plugIndex) in plugs" 
:key="plugIndex"
>
</component>

第二種

Vue的異步組件實(shí)踐有兩種，第一種是路由懶加載將應(yīng)用由路由層分為多個(gè)chunk，減小單個(gè)入口的打包體積。
還有一種就是在Tab頁、彈窗等不需要立即展示的都可以使用異步組件進(jìn)行加載，

<template>
  <div id="pageconfig">
    <component :is="dataAll"></component>
  </div>
</template>

<script>
export default {
  name: 'pageconfig',
  components: {
   table : () => import(`../pageconfig/table`),
    tabs: () => import(`../pageconfig/tabs`),
  },
  data () {
    return {
      plugs: [],
     dataAll: 'table'
    }
  },
}
</script>

首先加載兩個(gè)動(dòng)態(tài)組件Link1和Link2，通過data中的currentLink來指定動(dòng)態(tài)組件的名稱，這樣就可以動(dòng)態(tài)的加載組件