Vuejs嵌套动态组件

Question

知道我可能会有更多的孩子，在VueJS中还有其他方法来做嵌套组件吗？

我不知道哪个组件会出现在代码中，所以我使用动态组件，但是它们总是有多个子组件，而不是总是相同的数量。

我找到的唯一解决办法是还有别的办法吗？

从我的html：

<component :is="blocksElements[0].componentId">
    <component :is="blocksElements[0].child.componentId" v-if="blocksElements[0].hasChild">
        <component :is="blocksElements[0].child.child.componentId" v-if="blocksElements[0].child.hasChild" v-bind="blocksElements[0].child.child.props">
            <component :is="blocksElements[0].child.child.child.componentId" v-if="blocksElements[0].child.child.hasChild" v-bind="blocksElements[0].child.child.child.props"></component>
        </component>
    </component>
</component>

从我的js：

blocksElements: [
    {
        componentId: 'row',
        hasChild: true,
        child: {
            componentId: 'column',
            hasChild: true,
            child: {
                componentId: 'block-image',
                hasChild: true,
                props: {
                    logo: true,
                    width: '120'
                },
                child: {
                    componentId: 'block-image',
                    hasChild: false,
                    props: {
                        logo: true,
                        width: '120'
                    }
                }
            }
        }
    }
]

Answer 1

是的，存在，使用树菜单，vue.js有一个例子：https://br.vuejs.org/v2/examples/tree-view.html，这是递归。