Question

我设法使用name属性直接创建自嵌套组件，并且完全正常。

<template>
    <div>
        <span>Hi, I'm component A!</span>
        <component-a></component-a>
    </div>
</template>

<script>
    export default {
        name: 'component-a',
        components: {
            'component-a': this
        }
    }
</script>

现在，我想创建间接自嵌套组件。像这样：

ComponentA.vue：

<template>
    <div>
        <span>Hi, I'm component A!</span>
        <component-b v-if="hasItems" v-for="item in items" :item="item"></component-b>
    </div>
</template>

<script>
    import ComponentB from './ComponentB.vue'

    export default {
        name: 'component-a',
        components: {
            'component-b': ComponentB
        },
        props: ['items'],
        computed: {
            hasItems() {
                return this.items.length > 0
            }
        }
    }
</script>

ComponentB.vue：

<template>
    <div>
        <span>Hi, I'm component B!</span>
        <component-a v-if="hasItems" :items="item.items"></component-a>
    </div>
</template>

<script>
    import ComponentA from './ComponentA.vue'

    export default {
        name: 'component-b',
        components: {
            'component-a': ComponentA
        },
        props: ['item'],
        computed: {
            hasItems() {
                return this.item.items.length > 0
            }
        }
    }
</script>

但那失败了。我收到以下错误：

[Vue警告]：无法安装组件：模板或渲染功能定义。（在组件中找到）

有没有人遇到这样的事情并且能够解决它？根据文档，我们控制递归组件与条件呈现，我正在做什么...我甚至尝试在组件上使用name道具，但它没有做任何事情（我认为它应该没有，因为组件不是直接自我嵌套）。

Answer 1

我尝试了你的代码，我也得到了同样的错误，但没有关于如何继续的线索。后来我关闭了我的vue-cli并尝试直接使用CDN（独立版本）中的vue.js，它运行正常。

以下是工作示例：https://jsfiddle.net/mani04/z09Luphg/

这里没有魔力。 Component A和Component B使用counterValue互相呼叫。一旦counterValue达到某个限制，递归就会停止。

如果您没有得到更好的答案，并且无法修改您的应用架构，可以尝试使用此独立 vue.js方法。

编辑：下面有更多信息

在今天的进一步研究中，我遇到了关于webpack循环导入/循环依赖的github讨论：https://github.com/webpack/webpack/issues/1788

上面的独立 jsFiddle示例不需要任何ES6导入。在我的示例代码中，Vue.js在启动应用程序之前全局注册组件。因此它没有任何问题。

总之，这看起来不像Vue.js的问题，而是基于当前信息的webpack / es6限制。我可能错了，请继续探索！

Answer 2

对于此问题，实际上有一些不错的documentation和一些不同的解决方案，例如使用异步Webpack导入或在全局注册自己需要的组件。

<template>
    <div>
        <span>Hi, I'm component A!</span>
        <component-a></component-a>
    </div>
</template>

<script>
    export default {
      name: 'component-b',
      components: {
         // async import: 
         ComponentA: () => import('./ComponentA.vue')
      }
  }
</script>

如何在Vue JS 2中间接自嵌套组件？

2 个答案: