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

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在组件上使用prop，但它什么也没做（我也不认为应该这样做，因为组件不是直接自嵌套的） 。

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 限制。我可能错了，请继续探索！