實現代碼如下

<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=>{//動態顯示當前組件   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'      }    ]  }];

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。