1. 概述

动态组件就是可以根据控件名称，动态的加载组件到页面，这个好处由很多，比如在表单设计器中，我们可以使用动态组件，对每一个组件设置不同的属性数据。这里有一个问题，就是每一个组件的属性都可能不相同，那么这个时候，就可以用上动态属性绑定了。

2. 实现方法

比如我们现在需要将 流程启动，流程审批，流程实例放到同一个页面。
这些组件都有不同的属性。

那么我们可以这样做：

<template>
    <div class="formBox" style="width: 100%;height:100%;">
        <component :is="currentView" v-bind="props"></component>
    </div>
</template>

<script>
import Vue from "vue";
import userState from "@/assets/js/userState";
import {RxFit, Util} from "jpaas-common-lib";
import BpmInstApi from "@/api/bpm/core/bpmInst";
import BpmInstStart from "@/views/modules/bpm/core/BpmInstStart";
import BpmTaskStart from "@/views/modules/bpm/core/BpmTaskStart";
import BpmInstDetail from "@/views/modules/bpm/core/BpmInstDetail";
import RxLoading from "@/views/modules/bpm/workbench/RxLoading";

Vue.component(BpmInstStart.name,BpmInstStart);
Vue.component(BpmTaskStart.name,BpmTaskStart);
Vue.component(BpmInstDetail.name,BpmInstDetail);
Vue.component(RxLoading.name,RxLoading);

//打开文档的窗口
export default {
    name: "OpenDoc",
    mixins: [userState],
    components:{
        RxFit
    },
    data(){
        return {
            props:{},
            currentView:"rx-loading",
            actionMap:{
                start:"bpm-inst-start",
                startDraft:"bpm-inst-start",
                task:"bpm-task-start",
                detail:"bpm-task-start",
            }
        }
    },
    created() {
        let params=this.$route.params;

        BpmInstApi.getInfoByDefKeyInstId(params.defKey,params.instId).then(res=>{
            if(!res.success){
                this.$message.warn(res.message);
                return;
            }
            this.currentView=this.actionMap[res.action];
            if(res.action=="start" || res.action=="startDraft"){
                this.props.config={defKey:params.defKey};
            }
            if(res.action=="startDraft" ){
                this.props.instId= params.instId;
            }
            if(res.action=="task" ){
                this.props.taskId= res.taskId;
                this.props.instId= params.instId;
            }
        })
    },
}
</script>

页面首先加载一个loading 组件，我们会根据实际的情况，当前到底是加载哪个组件。
这里最关键的代码在我们可以根据我们返回的信息，动态的构建 props 对像，并通过 v-bind 指令将属性绑定到组件上。这样就可以根据不同的组件，动态构建传入参数。