슬둯

슬둯(slot)은 μ»΄ν¬λ„ŒνŠΈμ˜ μž¬μ‚¬μš©μ„±μ„ λ†’μ—¬μ£ΌλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€. νŠΉμ • μ»΄ν¬λ„ŒνŠΈμ— λ“±λ‘ν•œ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ λ§ˆν¬μ—…μ„ ν™•μž₯ν•˜κ±°λ‚˜ μž¬μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

슬둯 μ½”λ“œ ν˜•μ‹

슬둯의 문법을 λ°”λ‘œ μ½”λ“œλ‘œ μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.





Β 







<!-- ButtonTab.vue -->
<template>
  <div class="tab panel">
    <!-- νƒ­ 헀더 -->
    <slot></slot>
    <!-- νƒ­ λ³Έλ¬Έ -->
    <div class="content">
      Tab Contents
    </div>
  </div>
</template>

μœ„ μ½”λ“œλŠ” ButtonTab μ»΄ν¬λ„ŒνŠΈμ˜ μ½”λ“œμž…λ‹ˆλ‹€. 탭을 κ΅¬ν˜„ν•œλ‹€κ³  μƒκ°ν•˜κ³  νƒ­ 헀더와 본문을 κ΅¬λΆ„ν•˜λŠ” νƒœκ·Έλ₯Ό μž‘μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œ νƒ­ 헀더에 λ“€μ–΄κ°ˆ ꡬ체적인 νƒœκ·Έλ₯Ό μ •ν•˜μ§€ μ•Šκ³  일단 <slot> νƒœκ·Έλ‘œ 빈 칸을 λ‚¨κ²¨λ†‰λ‹ˆλ‹€. λ§Œμ•½ 이 μ»΄ν¬λ„ŒνŠΈλ₯Ό λ“±λ‘ν•œ μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ <slot> νƒœκ·Έ μ˜μ—­μ„ κ΅¬ν˜„ν•˜μ§€ μ•ŠμœΌλ©΄ ν•΄λ‹Ή 뢀뢄은 곡백으둜 ν‘œμ‹œλ©λ‹ˆλ‹€.

<slot> νƒœκ·Έμ˜ μœ„μΉ˜μ— μ£Όλͺ©ν•˜λ©΄μ„œ ButtonTab μ»΄ν¬λ„ŒνŠΈλ₯Ό TabContainer μ»΄ν¬λ„ŒνŠΈμ˜ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ λ“±λ‘ν•©λ‹ˆλ‹€.





Β 



Β 



Β 











<!-- TabContainer.vue -->
<template>
  <button-tab>
    <!-- slot μ˜μ—­ -->
    <h1>First Header</h1>
  </button-tab>
  <button-tab>
    <!-- slot μ˜μ—­ -->
    <h1>Second Header</h1>
  </button-tab>
  <button-tab>
    <!-- slot μ˜μ—­ -->
    <h1>Third Header</h1>
  </button-tab>
</template>

<script>
export default {
  components: {
    ButtonTab
  }
}
</script>

TabContainer μ»΄ν¬λ„ŒνŠΈμ— ButtonTab μ»΄ν¬λ„ŒνŠΈλ₯Ό λ“±λ‘ν•˜κ³  ButtonTab μ»΄ν¬λ„ŒνŠΈλ₯Ό μ„Έ 곳에 ν‘œμ‹œν–ˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œ <button-tab> μ»΄ν¬λ„ŒνŠΈ νƒœκ·Έμ˜ μ•ˆμ— 각기 λ‹€λ₯Έ ν—€λ”μ˜ λ‚΄μš©μ„ μ •μ˜ν–ˆμŠ΅λ‹ˆλ‹€. λ§Œμ•½ ButtonTab μ»΄ν¬λ„ŒνŠΈμ— <slot> νƒœκ·Έλ₯Ό μ •μ˜ν•˜μ§€ μ•Šμ•˜λ‹€λ©΄ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ“±λ‘ν•˜λŠ” μ‹œμ μ— λ§ˆν¬μ—…μ„ μž¬μ •μ˜ν•  μˆ˜λŠ” μ—†μ—ˆμ„ κ²ƒμž…λ‹ˆλ‹€.

이처럼 μŠ¬λ‘―μ„ μ‚¬μš©ν•˜λ©΄ μ»΄ν¬λ„ŒνŠΈμ˜ νŠΉμ • λ§ˆν¬μ—… μ˜μ—­μ„ μž¬μ •μ˜ν•˜μ—¬ 같은 μ»΄ν¬λ„ŒνŠΈλ₯Ό 각기 λ‹€λ₯΄κ²Œ ν‘œν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Named Slots

μœ„μ—μ„œλŠ” 슬둯의 κ°œλ…μ„ μ΄ν•΄ν•˜κΈ° μœ„ν•΄ 1개의 슬둯만 μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€. μŠ¬λ‘―μ€ name 속성을 μ§€μ •ν•˜μ—¬ μ—¬λŸ¬ 개 μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. μ’€ μ „ μ˜ˆμ œμ— λ„€μž„λ“œ μŠ¬λ‘―μ„ μ μš©ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.





Β 

Β 



<!-- ButtonTab.vue -->
<template>
  <div class="tab panel">
    <!-- νƒ­ 헀더 -->
    <slot name="header"></slot>
    <!-- νƒ­ λ³Έλ¬Έ -->
    <slot name="content"></slot>
  </div>
</template>




Β 
Β 



Β 
Β 



Β 
Β 




<!-- TabContainer.vue -->
<template>
  <button-tab>
    <!-- slot μ˜μ—­ -->
    <h1 slot="header">First Header</h1>
    <div slot="content" class="content">Tab Contents #1</div>
  </button-tab>
  <button-tab>
    <!-- slot μ˜μ—­ -->
    <h1 slot="header">Second Header</h1>
    <div slot="content" class="content">Tab Contents #2</div>
  </button-tab>
  <button-tab>
    <!-- slot μ˜μ—­ -->
    <h1 slot="header">Third Header</h1>
    <div slot="content" class="content">Tab Contents #3</div>
  </button-tab>
</template>
..

ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ •μ˜ν•œ 슬둯 νƒœκ·Έ μ˜μ—­μ— λ§ˆν¬μ—…μ„ μž¬μ •μ˜ν•  λ•Œ μœ„μ™€ 같이 HTML ν‘œμ€€ νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λŠ” 방법도 μžˆμ§€λ§Œ μ•„λž˜μ™€ 같이 <template> νƒœκ·Έλ₯Ό μ‚¬μš©ν•  μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.



Β 


Β 




<button-tab>
  <!-- slot μ˜μ—­ -->
  <template slot="header">
    <h1>First Header</h1>
  </template>
  <template slot="content">
    <div class="content">Tab Contents #1</div>
  </template>
</button-tab>

μ°Έκ³ 

Vue.js 2.6 버전뢀터 Named Slots 문법이 λ°”λ€Œμ—ˆμŠ΅λ‹ˆλ‹€.


Β 




Β 



<!-- κΈ°μ‘΄(2.5 μ΄ν•˜) -->
<template slot="header">
  <h1>First Header</h1>
</template>

<!-- 이후(2.6 이상) -->
<template v-slot:header>
  <h1>First Header</h1>
</template>

더 μžμ„Έν•œ λ‚΄μš©μ€ μ—¬κΈ°λ₯Ό μ°Έκ³ ν•˜μ„Έμš”.