关于Vue动态组件的插入

工作中经常使用elementUI组件，处理大型表单页面时经常在template里写各种乱七八糟的组件，有时候经常想用v-for来处理组件，经常忘记，特做一笔记

<component
    v-for="(item, key) in form"
    :key="key"
    :is="`el-${item.type}`"
    v-model="item.value"
    v-bind="item.props"
/>

js文件写法：

export default {
    data () {
        return {
            form: {
                input1: {
                    label: '输入项1',
                    value: '',
                    type: 'input',
                    props: {
                          clearable: true,
                    },
                },
                input2: {
                    label: '输入项2',
                    value: '',
                    type: 'input-number',
                    props: {
                          disabled: true,
                    },
                },
            },
        }
    },
}

对于组件内插槽，可以使用插入template的方法动态加载