vue動態(tài)配置模板 'component is'代碼

<template>
 <div v-if='object.child'>
 <div v-for="(item,ix) in object.child" :key="ix">
 <component :is="item.xtype" v-if='item'
 :objectVlue="objectVlue"
 :object="item">
 </component>
 </div>
 </div>
</template>
<script>
export default {
 data() {
 return {
 };
 },
 props: {
 objectVlue:Object,
 object:Object,
 },
 created() {
 var itemType = require(`../units/unit-type.js`).default||{};//1.0
 this.object.child.forEach(item=>{
 if(item.fileName){
 item.objDefault = require(`@/scene/${this.$route.query.typeName}/config/${item.fileName}.js`);//2.0
 } 
 })

 this.object.child.forEach(item=>{//動態(tài)顯示當前組件
 if(itemType[item.xtype])
 Vue.component(
 itemType[item.xtype].componentName,
 () => import(`@/components/info-collection/moudel/${itemType[item.xtype].fileName}`)
 )
 })
 }
};
</script>
//1.0=============unit-type.js所有模板配置文件 =======================
export default {
 tablePartMerge: {//表格合并模板xtype
 componentName: "tablePartMerge",//組件名稱
 fileName: "table-partInfo-merge"http://文件所在路徑
 },
 tablePartInfo: {
 componentName: "tablePartInfo",
 fileName: "table-partInfo"
 },
 ueditorUnit: {
 componentName: "ueditorUnit",
 fileName: "unit-ueditor"
 },
 filesUnit: {
 componentName: "filesUnit",
 fileName: "unit-files"
 },
 approves: { // 正文信息（審批記錄）
 componentName: "approves",
 fileName: "approves-unit"
 },
 requiredDate:{ // 要求完成日期
 componentName: "requiredDate",
 fileName: "required-date"
 },
}
//2.0====== table-partInfo-merge.js =========
module.exports = {
 "columns":[{
 "id": "partNumber",
 "disabled": false,
 "name":"物料編碼",
 "placeholder": "",
 "required": true,
 "selectDetail": [],
 "show": false,
 "span": 24,
 "width":"150",
 "xtype": "select"http://組件內用的表格
 }]
}

//=============父級傳過來的 object =======================
module.exports = [
 {
 title: '正文信息',
 name: '1',
 id:"",
 child:[
 {
 id:'partInfoData',//id
 show:'true',//是否顯示
 fileName:'tablePartInfo',//文件路徑名
 xtype:'tablePartMerge'//表格模塊
 },
 {
 id:'mainAttachements',//文本編輯器
 show:'true',
 fileName:'',
 xtype:'filesUnit'
 },
 {
 id:'vivo_RequestCompletionTime',//時間選擇模塊
 show:'true',
 fileName:'',
 xtype:'requiredDate'
 },
 {
 id:'approves',
 show:'true',
 fileName:'approval',
 xtype:'approves'
 }
 ]
 }
];