vue实现动态表单动态渲染组件的方式(2)

本文实例为大家分享了vue实现动态表单动态渲染组件的方式，供大家参考，具体内容如下

思路

• 先把所有可能出现的表单/组件写在主页面
• 每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配
• 根据后端返回的数据，动态生成一个slot列表，slot的name属性要与数据的类型匹配，此列表放入一个子组件
• 在主页面引入子组件，把之前主页面写好的各个表单/组件放入子组件标签中，通过匹配slot插槽去渲染组件，没有匹配到插槽的则不会渲染

案例

//主页面 

//FormItemSlot.vue  插槽列表 

以上数据会直接收集到formData中，此方式的好处在于表单数据都在一个页面，方便数据处理.

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