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

vue 实现动态表单/动态渲染组件的方式（一）

• 思路

  • 先写好各个可能会出现的表单或者自定义的组件，引入。

  • 此时后端可能会给到一个对象型数组，每个对象有要渲染组件的一个类型标识

  • 利用component is 动态组件，根据不同的组件类型标识，渲染展示不同的组件

  • 在利用组件的数据通信去收集各个子组件的数据

• 实现demo

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

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

    //InputComponent.vue  要渲染的子组件<template><el-input:value="username"@input="inputHandler"></el-input></template><script>exportdefault{
        name:'InputComponent',data(){return{}},
        model:{
          prop:'username',
          event:'input'},
        props:{
          username: String},
        methods:{inputHandler(ev){
            console.log(ev)this.$emit('input', ev)}}}</script><stylescoped></style>

    //SwitchComponent.vue  要渲染的子组件<template><el-switch:value="checked"active-color="#13ce66"inactive-color="#ff4949"@change="changeHandler"></el-switch></template><script>exportdefault{
        name:'SwitchComponent',data(){return{}},
        model:{
          prop:'checked',
          event:'change'},
        props:{
          checked:{default:true}},
        methods:{changeHandler(ev){this.$emit('change', ev)}}}</script><stylescoped></style>

    //SelectComponent.vue  要渲染的子组件<template><el-select:value="role"placeholder="请选择"@change="changeHandler"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.label"></el-option></el-select></template><script>exportdefault{
        name:'SelectComponent',data(){return{
            options:[{
                value:'1',
                label:'李世民'},{
                value:'2',
                label:'嬴政'},{
                value:'3',
                label:'刘邦'},{
                value:'4',
                label:'项羽'},{
                value:'5',
                label:'范蠡'}],
            value:''}},
        model:{
          prop:'role',
          event:'change'},
        props:{
          role:{default:''}},
        methods:{changeHandler(ev){this.$emit('change', ev)}}}</script><stylescoped></style>

• 主组件（父组件）

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

  //Main.vue  父组件<template><div><el-form:model="formData"><el-form-itemv-for="(item, index) in formItemList":key="index":label="item.label"><component:is="item.type"v-model="formData[item.key]"></component></el-form-item></el-form></div></template><script>//引入三个表单组件import InputComponentfrom'./subComponents/InputComponent'import SelectComponentfrom'./subComponents/SelectComponent'import SwitchComponentfrom'./subComponents/SwitchComponent'exportdefault{
      name:'Main',data(){return{//数据的type值要与组件的名字对应
          formItemList:[{ type:'switch-component', require:true, label:'开关', key:'isOpen'},{ type:'input-component', require:true, label:'姓名', key:'name'},{ type:'select-component', require:true, label:'角色', key:'role'},],
          formData:{}}},
      components:{
        InputComponent,
        SwitchComponent,
        SelectComponent,},
      methods:{}}</script><stylescopedlang="less"></style>