vue 使用 component is 实现动态表单，如何实现嵌套？

Question

伪代码：

<component :is="item.type" v-bind="item.props" v-for="item in list"/>

这种方式可能可以解决像这种结构的：

list: [{type: 'input'},{type: 'input'},{type: 'input'}]

但是如果是嵌套结构如何渲染呢? 比如这样的：

list: [
    {
        type: "div",
        children: [
            {
                type: "div",
                children: [
                    {
                        type: "input",
                    },
                    {
                        type: "input",
                    },
                ],
            },
        ],
    },
];

Answer 1

事实上这并不难，如果你的结构是树形的，那你只需要额外添加一个用于渲染父子结构的组件让他自己递归就可以了。

https://jsbin.com/zutilahulu/2/edit?html,js,output

核心逻辑

  <div id="app">
    <nest-render :value="item" v-for="item of list"/>
  </div>

const list = [
    {
        type: "div",
        children: [
            {
                type: "div",
                children: [
                    {
                        type: "input",
                        attr: {style:"margin-right:100px"}
                    },
                    {
                        type: "input",
                    },
                ],
            },
        ],
    },
];

Vue.component("nest-render",{
  name:"nest-render",
  props:["value"],
  template:`
    <component :is="value.type" v-bind="value.attr">
      <template v-if="value.children">
        <nest-render v-for="(item,index) of value.children" :value="item" :key="index">
      </template>
    </component>
  `
});

new Vue({
  el: '#app',
  data(){
    return {
      list:list
    }
  }
});