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。这种方式对我有用，并且递归地遍历数据树。

Answer 2

我现在也遇到了同样的问题：通常是webpack会导致此问题，因此您有两个选择：

1）在全球范围内注册您的组件

2）在您的子组件上，像这样注册父组件：

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

您可以在此处了解更多信息： https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

来自子递归的Vue组件父元素包括

2 个答案: