인라인 템플릿 구성 요소를 중첩하는 방법은 무엇입니까?

Question

<overview> 구성 요소가 있는데 모든 연락처가 소품에 있습니다.

개요 내에서 연락처를 반복하여 그에 따라 테이블 행을 표시합니다.

그러나 모든 테이블 행에서 구체적인 방법으로 전용 <contact> 구성 요소를 사용하고 싶습니다.

서로 다른 데이터 목록에 동일한 <overview> 구성 요소를 사용하기 때문에이 중첩 기능을 사용하고 싶습니다. 그리고 각 테이블 행 내에서 예를 들어 <contact> 또는 <project> 구성 요소를 사용합니다.
그런 식으로 특정 구성 요소 방법 등을 구성 할 수있었습니다.

하지만이 작업을 수행 할 수있는 방법을 찾을 수 없습니다.

https://jsfiddle.net/vbu8x8ko/

편집 : 나는
같은 <overview-contacts> 같은 다른 개요 구성 요소를 만드는 것이 더하고 공유 된 개요 기능을 유지 mixin을 사용할 것인가?

이렇게하면 모든 테이블 행에 중첩 된 구성 요소가없는 것입니다.

그래도 중첩 된 인라인 템플릿을 작동시키는 방법을 알고 싶습니다.

의견이 있으십니까?

Answer 1

이 문제는 inline-template 모드에서 발생했을 수 있습니다. 더 유연한 템플릿 작성을 허용하지만 inline-template은 템플릿의 범위를 추론하기가 더 어렵게 만듭니다.

Vue.config.debug = true; 
 
Vue.config.devtools = true; 
 
Vue.component('overview', { 
 
    \t props: [ 'contacts', 'columns' ], 
 
    template: `<table> 
 
      <thead> 
 
       <tr> 
 
        <template v-for="column in columns"> 
 
         <th>{{ column }}</th> 
 
        </template> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr v-for="value in contacts"> 
 
        <contact :contact="value" :columns="columns"></contact> 
 
       </tr> 
 
      </tbody> 
 
     </table>` 
 
}); 
 

 

 
Vue.component('contact', { 
 
    props: [ 'contact', 'columns' ], 
 
\t \t template: `<div><td v-for="column in columns">{{ valueForColumn(column) }}</td></div>`, 
 
    methods: { 
 

 
     valueForColumn(column) 
 
     { 
 
     debugger 
 
      if (column == 'name') 
 
      { 
 
       \t return this.contact.firstName +' '+ this.contact.lastName; 
 
      } 
 
     } 
 
    } 
 
}); 
 

 

 
new Vue({ 
 
    \t el: '#app' 
 
});

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 
<div id="app"> 
 
    <overview :contacts="[ 
 
     { 
 
      'id':1, 
 
      'firstName':'John', 
 
      'lastName':'Doe' 
 
     }, 
 
     { 
 
      'id':2, 
 
      'firstName':'John', 
 
      'lastName':'Doe' 
 
     }, 
 
     { 
 
      'id':3, 
 
      'firstName':'John', 
 
      'lastName':'Doe' 
 
     } 
 
    ]" 
 
    :columns="[ 'id', 'name' ]" 
 
    ></overview> 
 
</div>