CODEWITHSUNDEEP
javascriptvuejs2components
Trouble
Trouble

Reputation: 199

Vue component parent from child recursive include

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

Upvotes: 1

Views: 742

Answers (2)

Ragash
Ragash

Reputation: 45

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

Upvotes: 3

Trouble
Trouble

Reputation: 199

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.

Upvotes: 0

Related Questions