vue.js___slot

react에서는 props를 이용해 컴포넌트를 내려줄 수 있지만 vue에서는 그게 안되니까 slot을 사용함. (컴포넌트 안에 컴포넌트 넣을 때)
ui 짤 때 부모 컴포넌트 안의 하위 컴포넌트가 쪼꼼쪼꼼 바뀔 때,,

• slot의 기능 : 부모 컴포넌트에서 v-slot:으로 연결해 자식 컴포넌트로 보내주는 기능.
  
  
• v-slot:slotName === #slotName
  v-slot ==== # 으로 줄여쓰기 가능.

👉 slot 예시

  <!-- 상위(부모) 컴포넌트 -->
  template 태그에 v-slot: 또는 # 기호를 달아주고
  하위 컴포넌트에서 지정할 slot 요소의 이름을 지정해준다.
  이름이 없는 template는 하위 컴포넌트에서 default slot 값으로 처리한다.
  
   <template>
   	<h1>슬롯이 도대체 머냐!</h1>
    <header>
    	<template v-slot:forFirst>
            <p>첫 번째 슬롯</p>
        </template>
        <template #forSecond>
            <p>두 번째 슬롯</p>
        </template>
        <template #default>
            <p>세 번째 슬롯</p>
        </template>
    </header>
   </template>


  <!-- 하위(자식) 컴포넌트 -->
  하위 컴포넌트의 template 요소에 <slot> 요소를 추가한다. 
  상위 컴포넌트에서 v-slot 등으로 지정한 값이 slot 태그의 name 속성의 
  값이 되도록 하면 <slot> 요소들이 기존의 하위 컴포넌트 요소들과 함께 표기되게 
  되는 것이다. 하위 컴포넌트에서 이름을 지정해주지 않은 무기명의 slot은 
  상위 요소에서의 #default 요소에 대응되어 적용된다.

   <template>
   	<div>
    	    <slot name='forFirst'></slot>
            <p>first</p>
            <slot name='forSecond'></slot>
            <p>second</p>
            <slot></slot>
            <p> third </p>
    	</div>
   </template>


  [ 출력 화면 ]
 	 	첫 번째 슬롯
 	 	first
 	 	두 번째 슬롯
  	 	second
 	 	세 번째 슬롯
  	 	third
        
        

---

👉 slot에 data담기

• slot에 데이터 담아줄 때는 하위 slot 부분에 v-bind:선언한 속성 이름 써주고 script부분에서 해당 속성에 데이터 담아주면 됨

slot에 데이터 담기 예시) - 부모 slot은 첫 번째 예시와 같음. 
	
 <template>
    <div>
   	<slot name="forFirst"  :myData='myName'></slot>
        <p>first</p>
        <slot name='forSecond'></slot>
        <p>second</p>
        <slot></slot>
        <p>third</p>
    </div>
 </template>
 
 <script>
     export default {
     	data(){
            return {
            	myName: 'youngeun.park!~!~!~!~!'
            }
        }
     };
 </script>
 
 
 [ 출력 화면 ]
 		첫 번째 슬롯 youngeun.park!~!~!~!~!
        	first
            	두 번째 슬롯
                second
                세 번째 슬롯
                third

---

👉 Named slot - name으로 부모-자식간 slot 연결 가능.

자식 slot에서 순서를 정해두었으면, 부모 slot에서는 자식 slot에 들어갈 내용만 담기 때문에 
순서를 다르게 해도 상관 없음. 부모 slot의 순서가 어떻든간에 자식 slot에서 만들어준 순서대로
출력됨.

   <!--(자식)-->
   <template>
   	<h1>
    	    <slot name='icon'></slot>
            <slot name='box'>안녕하세요.</slot>
    	</h1>
   </template>
   
   <!--(부모)-->
   <template>
   	<slot>
    	    <template v-slot:icon>
            	<span>즐거운</span>
            </template>
            <template #box>
            	<span>공부</span>
            </template>
    	</slot>
        <slot>
            <template #box>
            	<span>초록</span>
            </template>
            <template #icon>
            	<span>매실</span>
            </template>
        </slot>
        <slot>
            <template #box>
            </template>
            <template #icon>
            	<span>반갑습니다.</span>
            </template>
        </slot>
   </template>
   
   
   [ 출력 화면 ]
   		즐거운
        	공부
            
            	매실
                초록
                
                반갑습니다.
                안녕하세요.
                
                
    👉부모 slot에서 #icon, #box의 순서가 바뀌었어도, 
      자식 slot에서 이미 순서를 정해두었기 때문에 자식 slot의 순서대로 감.
      
    👉자식 slot의 #box에 있는 '안녕하세요.'는 부모 slot의 데이터가 들어감으로써 사라짐. 
      부모 slot에 데이터가 들어가지 않으면 자식 slot에서 담아준 게 보임. 

---

👉 slot에도 props를 줄 수 있음.

<template>
   <div>
   	<h1>안녕??!!??</h1>
    	<header>
           <template v-slot:forFirst='props'>
                <p>이 것은{{ props.myData }}</p>
           </template>
           <template #forSecond>
                <p>그리고 이 것은<p>
            </template> 
        </header>
   </div>
</template>

[ 출력 화면 ]
		안녕??!!??
        	이 것은 첫 번째 슬롯 youngeun.park!~!~!~!~!
            	그리고 이 것은 두 번째 슬롯

---

• 상위 컴포넌트
• 하위 컴포넌트
  이런식으로 하위 컴포넌트에 name등 속성 없이 slot만 하고, 상위 컴포넌트에 v-slot(#~)없이 삽입만 해줘도 인식은 하더라는 이야기.

  ---

  
  

참고 👈 click!