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

【问题标题】：Vue component parent from child recursive include来自子递归的Vue组件父包含
【发布时间】：2020-01-12 00:28:59
【问题描述】：

所以我想让许多组件相互嵌套并动态包含。

让我们假设简单的情况：

-container -row -container -row -widget

等等

那么我如何包含将加载行的容器，该行将以优雅的方式加载先前的组件容器（我猜是递归的）

除了container 和row 之外，我希望这个功能适用于更多的组件

【问题讨论】：

我想用data 冒泡，因为我包括基于树的 json。
这可能很有用alligator.io/vuejs/recursive-components

标签： javascript vuejs2 components

【解决方案1】：

我自己现在也遇到了同样的问题：通常是 webpack 导致了这个问题，所以你有两个选择：

1) 全局注册您的组件

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

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

您可以在此处阅读更多内容： https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

【讨论】：

【解决方案2】：

所以为了实现我的目标，我必须构建 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 如果它有更多的孩子要加载。这种方式对我有用，并且递归地遍历数据树。

【讨论】：