vue.js___slot

22987 ワード
テキストリンク
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に入れる

  • slotにデータを読み込む場合は、v-bind:宣言された属性名をサブslot部分に書き込み、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は道具も提供できます。

    <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(#~)を持たないslotを挿入するだけで認識できる.
    • リファレンス 👈 click!
    TIL DAY.学習33[react]Redux
    データベースの続き