概要

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

实现步骤

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>

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

文档更新时间: 2021-07-09 14:26   作者:zyg