vue动态组件实现动态表单的方法

本文获取动态列和动态表单的后端使用数据库存储，使用java接口获取代码内容。

后端代码我就不粘贴出来了，就是普通的从数据库中获取代码，获取到的代码例子如下：

已下代码是iview的modal信息

    <Modal width="800" v-model="modal" title="新增"  :mask-closable="false" ><i-Form :model="saveform" ref="saveform" :rules="ruleValidate" :label-width="100"><row><i-col span="12" ><Form-Item label="代码" prop="dm"><i-Input v-model="saveform.dm"></i-Input></Form-Item></i-col><i-col span="24" ><Form-Item label="名称" prop="mc"><i-Input v-model="saveform.dm"></i-Input></Form-Item></i-col></row></i-Form><div slot="footer"><i-button type="text" @click="modal=false">取消</i-button><i-button type="info" @click="save">保存</i-button></div></Modal>

 前端页面中加入自定义组件：

    <!-- 动态组件注入 --><component :is="dynamicComponent" :saveform="saveform" ref="dynamicComp"></component>

 然后在vue的create生命周期中，加入已下代码，用于注册动态表单：

data: {dynamicComponent: null
},	
created: function () {let self = this;var url = baseUrl + 'xxxxxx';let pro = new Promise((resolve, reject) => {$.ajax({url: url,type: 'POST',data: {},dataType: 'json',success: function (res) {let nr = res.content.nr;try {resolve(nr);} catch (error) {reject(error);}},error: function (err) {console.log('err:', err);reject(err);}});});pro.then(result => {console.log('结果:', result);// 创建一个动态组件const DynamicModal = {template: result,props: ['saveform'], // 接收父组件传递的数据data() {return {modal: false,saveform: {dm:null,mc:null}};},methods: {save: function () {var self = this;console.log('这是保存方法');},}};// 在 Vue 实例中注册动态组件app.$options.components.DynamicModal_1 = DynamicModal;// 在模板中使用动态组件self.dynamicComponent = 'DynamicModal_1';console.log('结果:self', self);}).catch(error => {console.log('出错:', error);});},