vue动态配置模板 'component is'代码

实现代码如下<template><divv-if='object.child'><divv-for="(item,ix)inobject.child":key="ix"><c

实现代码如下

<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'
 }
 ]
 }
];

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