Vue slot

1. Vue slot

• 링크 : https://kr.vuejs.org/v2/guide/components-slots.html

  : slot의 이름값에 대응하여 html과 같은 템플릿 조각을 넣을 수 있다.

  //Modal.vue
  <template>
   <transition name="modal">
     <div class="modal-mask">
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-header">
             <slot name="header">default header</slot>
           </div>
           <div class="modal-body">
             <slot name="body">default body</slot>
           </div>
           <div class="modal-footer">
             <slot name="footer"></slot>
           </div>
         </div>
       </div>
     </div>
   </transition>
  </template>

> - 사용하는 곳에서 slot의 name값을 이용해서 템플릿 조각을 넣을 수 있다.

```

• V-slot:[slot name], slot="[name]"을 통해서 템플릿 조각을 대응 시킨다.
• Modal.vue의 재사용