来自子递归的Vue组件父包含

Question

So I want to have many components nested to each other and included dynamically.

Lets assume simple case:

-container -row -container -row -widget

etc.

So how can I include container that will load row which will load previous component container in an elegant way (recursive I guess)

I want this functionality for more components than just container and row

Answer 1

I had the same problem myself right now: it's usually webpack which cause this problem so you have two options:

1. Register your component Globally

2. On you child component, register the parent like this:

   components: { ComponentLoader: () => import('./ComponentLoader.vue') }

you can read more here: https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

Answer 2

So to achieve my goal I have to build ComponentLoader and child components loaded from it.

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>

Which for instance will load Article component from its children:

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

So ArticleComponent will call ComponentLoader again if it has more children to load. This way works for me and is recursively going through the data tree.