v-for 루프 내에 이름이 지정된 슬롯을 삽입하십시오.

Question

루프 내에 이름이 지정된 슬롯을 삽입하는 방법을 아는 사람이 있습니까? 나는 예를 들어,이 코드를 가지고 : 어린이

<div v-for="num in nums" :key="num"> 
    <slot name="foo"></slot> 
</div> 

그리고 부모가 같다 :

Duplicate presence of slot "foo" found in the same render tree - this will likely cause render errors. 

: 내가 그래서 콘솔이 경고를 표시합니다 경우

<foo-component :nums="nums> 
    <template slot="foo"> 
     <span>Inside the foo component</span> 
    </template> 
</foo-component> 

을 누구든지 그 방법을 알고 있습니까?
미리 감사드립니다.

Answer 1

슬롯 이름은 고유해야합니다. 당신은 루프 내부의 슬롯을 만들려면, 당신은 슬롯 이름, 예컨대 :

<div v-for="num in nums" :key="num"> 
    <slot :name="'foo_' + num"></slot> 
</div> 

에 번호를 추가하고 다음과 같이 사용할 수 있습니다 :

<foo-component :nums="3"> 
    <template slot="foo_1"> 
     <span>Inside the foo component slot 1</span> 
    </template> 
    <template slot="foo_2"> 
     <span>Inside the foo component slot 2</span> 
    </template> 
    <template slot="foo_3"> 
     <span>Inside the foo component slot 3</span> 
    </template> 
</foo-component>