Vue 利用extend在父组件内动态注册子组件

前言：我在上家公司遇到一个需求，就是有一个组件库现有四十多个组件，未来可能还会更多。它们都是渲染到同一个位置，但是根据项目场景不同一次只会用到组件库里的某几个组件。如果我将组件全部引入进页面，那将是庞大的体力活，而且后续追加组件我还得来改代码。最后找到了动态注册组件的方式，每次根据后端返回的参数动态加载需要的组件。我就是根据下面的一个例子来实现自己需要的功能的，例子：

// Vue 利用extend在父组件内动态注册子组件
<template>
    <div class="testPage">
        <Button type="primary" @click="btnClickHandle">显示</Button>
        <div ref="xxx"></div>
    </div>
</template>

<script>
    import Vue from "vue";
    import store from "@/store";
    export default{
        name: "testPage",
        data(){
            return {}
        },
        methods: {
            registerComponent(name){
                return import("./component" + name)
            },
            btnClickHandle(){
                let name = "test";
                this.registerComponent(name).then(component => {
                    const cpt = Vue.extend(component.default);
                    new cpt({
                        store,
                        el: this.$refs.xxx,
                        //data: { // 传值
                        //    id: ''
                        //},
                        //propsData: {
                        //    devid: ''
                        //}
                    })
                })
            }
        }
    }
</script>

<style lang="less">
    .testPage{
        width: 100%;
        height: 100%;
    }
</style>

感谢上家公司同方赛威讯给了我一个学习和成长的平台，感谢曾经帮助过我的人们，祝你们工作顺利，生活愉快！