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

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

思路

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

实现demo

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

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

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




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




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




主组件(父组件)

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

//Main.vue  父组件




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

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

你可能感兴趣的:(vue实现动态表单动态渲染组件的方式(1))