Vue компонент parent из дочернего рекурсивного включения

Question

Итак, я хочу, чтобы многие компоненты были вложены друг в друга и включены динамически.

Давайте предположим простой случай:

-container -row -container -row -widget

и т.д.

Так, как я могу включить контейнер, который будет загружать строки, которые будут элегантно загружать предыдущий компонентный контейнер (я думаю, рекурсивно)

Я хочу эту функциональность для большего количества компонентов, чем просто container и row

Answer 1

Таким образом, чтобы достичь своей цели, мне нужно собрать ComponentLoader и дочерние компоненты, загруженные из него.

ComponentLoader.vue
<template
    v-for="(block, index) in data.children">
    <component
      v-if="component"
      :is="component"
      :key="`container-${block.id}-${index}`"
      :data="block"/>
  </template>
</template>

Который, например, будет загружать компонент Article из его дочерних элементов:

ArticleComponent.vue
<template>
  <SimpleArticle
    :data="data"/>
  <ComponentLoader
    v-if="data.children"
    :data="data"/>
</template>

Так что ArticleComponent снова вызовет ComponentLoader, если у него будет больше дочерних элементов для загрузки. Этот способ работает для меня и рекурсивно проходит по дереву данных.