Vue动态加载并注册组件

一般在编写Vue程序时，引入组件通常这么写：

//引入组件
import cmpName from './components/Cmp';

//注册组件
components:{
    cmpName
},

缺点：硬编码，代码中写死，不灵活。

很多时候，需要动态的引入组件并注册。

例如：使用Element-UI的Tabs时，tab的组件需要根据左侧菜单的点击来动态生成。

动态引入并注册组件

创建Cmp1.vue、Cmp2.vue、Cmp3.vue。

在Cmp1.vue中动态的引入并注册Cmp2和Cmp3。

<template>
    <div>
      <component v-for="item in cmps" :is=item.content></component>
    </div>
</template>

<script>
    export default {
        name: "Cmp1",
        data(){
            return{
                cmps:[{
                    path:'./Cmp2',
                    content:null
                },{
                    path:'./Cmp3',
                    content:null
                }]
            }
        },
        mounted() {
            this.cmps.forEach(c => {
                c.content = require(''+c.path).default;
            });
        }
    };
</script>