1.概要

在VUE开发中，我们有时候需要动态取加载组件来实现。下面使用一个例子来说明如何使用动态组件。

2.实现步骤

2.1 准备两个组件

为了说明问题，我们尽量做简单的实现。

编写Demo1.vue 代码如下：

<template>
    <div>demo1 {{params.name}}</div>
</template>
<script>
    export default {
        name: "rx-demo1",
        props:{
            params:{
                type:Object
            }
        }
    }
</script>

编写Demo2.vue

<template>
    <div>demo2 {{params.name}}</div>
</template>
<script>
    export default {
        name: "rx-demo2",
        props:{
            params:{
                type:Object
            }
        }
    }
</script>

2.2 实现动态组件加载

<template>
    <div>
        <a-button @click="demo1">demo1</a-button>
        <a-button @click="demo2">demo2</a-button>
        <component :is="component" :params="params" ></component>
    </div>
</template>

<script>
    export default {
        name: "DynamicDemo",
        data(){
            return {
                component:"",
                params:"",
            }
        },
        methods:{
            demo1(){
                var demo1=this.loadView("modules/demo/Demo1.vue");
                this.component=demo1;
                this.params={name:"老张"};
            },
            demo2(){
                var demo2=this.loadView("modules/demo/Demo2.vue");
                //var demo2=require("./Demo2.vue").default;
                this.component=demo2;
                this.params={name:"老王"};
            },
            loadView  (view)  { // 路由懒加载
                return () => import(`@/views/${view}`)
            }

        }
    }
</script>

加载组件有三种方法：

方法1：
var demo2=this.loadView("modules/demo/Demo2.vue");

方法2
var demo2=require("./Demo2.vue").default;

点击按钮时，就实现了组件的动态加载。

方法3：

<template>
    <div>
        <a-button @click="demo1">demo1</a-button>
        <a-button @click="demo2">demo2</a-button>
        <component :is="component" :params="params" ></component>
    </div>
</template>

<script>
    import Demo1 from "./Demo1";
    import Demo2 from "./Demo2";

    export default {
        name: "DynamicDemo",
        components:{
            "rx-demo1":Demo1,
            "rx-demo2":Demo2
        },
        data(){
            return {
                component:"",
                params:"",
            }
        },
        methods:{
            demo1(){
                this.component="rx-demo1";
                this.params={name:"老张"};
            },
            demo2(){
                this.component="rx-demo2";
                this.params={name:"老王"};
            }
        }
    }
</script>

先加载组件，在使用组件名称进行切换。