slot

slot , 컴포넌트 마크업 확장 도구

# App.vue
<template>
  <button-tab>

    <template #header>  <!-- 슬롯 : header -->
      <h2>Hello world!</h2>
    </template>
    
    <template #content> <!-- 슬롯 : content -->
      <div style="margin-left:10px;">
        <label for="idInput">이름 :</label>
        <input type="text" id="idInput" placeholder="이름을 입력해 주세요.">
      </div>
    </template>
    
  </button-tab>
</template>

<script>
import ButtonTab from '@/components/ButtonTab.vue'
export default {
  components:{
    ButtonTab,
  }
}
</script>



# ButtonTab.vue

<template>
  <div class="tab panel">
    <slot></slot>
 
    <slot name="header"></slot>	<!-- 여기 슬롯 name에 들어감 -->
    <slot name="content"></slot><!-- 여기 슬롯 name에 들어감 -->
    
  </div>
</template>

<script>
export default {
}
</script>

부모 컴포넌트에서 <template v-slot:header> 또는 약어 <template #header>
자식 컴포넌트에서 <slot name="header">