javascript - 如何在 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 warn]: Failed to mount component: template or render function not defined. (found in component )

有没有人遇到过这样的事情并且能够解决它？根据文档，我们通过条件渲染控制递归组件，这就是我正在做的......我什至尝试在组件上使用 name Prop ，但它什么也没做(我认为它不应该因为组件不直接自嵌套)。

Answer 1

我试过你的代码，但我也遇到了同样的错误，不知道如何继续。后来我关闭了我的 vue-cli 并尝试直接从 CDN(独立​​版本)使用 vue.js，它工作正常。

这是工作示例:https://jsfiddle.net/mani04/z09Luphg/

这里没有魔法。 组件 A 和 组件 B 使用 counterValue 相互调用。一旦 counterValue 达到某个限制，递归就会停止。

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

编辑:下面有更多信息

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

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

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