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

vue 实现动态表单/动态渲染组件的方式（一），供大家参考，具体内容如下

思路

• 先写好各个可能会出现的表单或者自定义的组件，引入。
• 此时后端可能会给到一个对象型数组，每个对象有要渲染组件的一个类型标识
• 利用component is 动态组件，根据不同的组件类型标识，渲染展示不同的组件
• 在利用组件的数据通信去收集各个子组件的数据

实现demo

三个表单组件，用了element-ui

此处用了自定义组件的v-model来收集子组件的数据

//InputComponent.vue  要渲染的子组件 

//SwitchComponent.vue  要渲染的子组件 

//SelectComponent.vue  要渲染的子组件 

主组件（父组件）

此处用了自定义组件的v-model来收集子组件的数据

//Main.vue  父组件 

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

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