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メソッドを試してみてください。

EDIT：さらに研究を

以下の詳細今日、私はWebPACKの循環的な輸入/循環依存関係でこのgithubの議論に出くわした：上記https://github.com/webpack/webpack/issues/1788

スタンドアロン jsFiddleの例は、いずれも必要ありませんES6のインポート。私のサンプルコードでは、Vue.jsはアプリケーションを起動する前にコンポーネントをグローバルに登録しています。したがって、問題なく動作します。

要するに、これはVue.jsの問題ではありませんが、現在の情報に基づくwebpack/es6の制限です。私は間違っているかもしれません、さらに探検してください！