vue动态配置模板 '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=>{//动态显示当前组件
   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\"//文件所在路径
 },
 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\"//组件内用的表格
 }]
}

//=============父级传过来的 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\'
      }
    ]
  }
];

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。