如何在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道具，但它什么也没做（我认为它应该，因为组件不是直接自嵌套）。

Answer 1

我试过你的代码，我也结束了相同的错误，没有一个线索如何进行。后来我关闭了我的vue-cli并直接使用CDN（独立​​版本）中的vue.js，并且它工作正常。

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

有没有神奇怎么回事。 Component A和Component B互相打电话给counterValue。一旦counterValue达到一定的限制，递归停止。

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

编辑：下面

在今天进一步研究更多的信息，我碰到这个github上讨论传来的WebPack周期性进口/循环依赖：https://github.com/webpack/webpack/issues/1788

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

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