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의 토론을 가로 질러왔다 순환 수입/순환 종속성 https://github.com/webpack/webpack/issues/1788는

독립 jsFiddle의 예는 위의 어떤을 필요로하지 않습니다 ES6 수입품. 샘플 코드에서 Vue.js는 앱을 시작하기 전에 구성 요소를 전역으로 등록합니다. 따라서 아무 문제없이 작동합니다.

요약하면 Vue.js의 문제는 아니지만 현재 정보를 기반으로 한 webpack/es6 제한 사항입니다. 내가 틀렸을 수도 있습니다. 계속 더 탐험 해주세요!