슀μ½₯λ“œ 슬둯

슬둯(slot)이 μ»΄ν¬λ„ŒνŠΈ ν…œν”Œλ¦Ώμ˜ μž¬μ‚¬μš©μ„±μ„ 늘렀주기 μœ„ν•œ κΈ°λŠ₯이라면 슀μ½₯λ“œ 슬둯(Scoped slot)은 μ»΄ν¬λ„ŒνŠΈ λ°μ΄ν„°μ˜ μž¬μ‚¬μš©μ„±μ„ λ†’μ—¬μ£ΌλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€. 일반적으둜 λ·°μ—μ„œλŠ” ν”„λ‘­μŠ€ μ†μ„±μ΄λ‚˜ 이벀트 λ°œμƒκ³Ό 같은 μ»΄ν¬λ„ŒνŠΈ 톡신 방식을 μ œμ™Έν•˜κ³ λŠ” λ‹€λ₯Έ μ»΄ν¬λ„ŒνŠΈμ˜ 값을 μ°Έμ‘°ν•  수 μ—†μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 슀μ½₯λ“œ μŠ¬λ‘―μ€ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ 값을 μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ ‘κ·Όν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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

슀μ½₯λ“œ μŠ¬λ‘―μ„ μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œλŠ” 기본적으둜 μƒμœ„, ν•˜μœ„ 2개의 μ»΄ν¬λ„ŒνŠΈκ°€ ν•„μš”ν•˜κ³  각각의 μ»΄ν¬λ„ŒνŠΈμ— μ•„λž˜μ™€ 같이 κ΅¬ν˜„ν•΄μ•Όν•©λ‹ˆλ‹€.

<!-- ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ 슬둯 νƒœκ·Έ -->
<slot :μƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ 전달할 속성 이름="ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ 데이터"></slot>

λ¨Όμ € ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ <slot> νƒœκ·Έλ₯Ό μ •μ˜ν•˜κ³  v-bind λ””λ ‰ν‹°λΈŒμ˜ 약식 문법인 :λ₯Ό μ΄μš©ν•˜μ—¬ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ 데이터λ₯Ό μ—°κ²°ν•©λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈ 톡신 λ°©λ²•μ—μ„œ 배운 ν”„λ‘­μŠ€ 속성 전달 방법과 λΉ„μŠ·ν•œ ν˜•μ‹μž…λ‹ˆλ‹€.

이제 μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ μ½”λ“œλ₯Ό λ³΄κ² μŠ΅λ‹ˆλ‹€.

<!-- μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ— λ“±λ‘λœ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈ νƒœκ·Έ λΆ€λΆ„ -->
<child-component>
  <template slot-scope="μž„μ˜μ˜ λ³€μˆ˜">
    {{ μž„μ˜μ˜ λ³€μˆ˜.μƒμœ„ μ»΄ν¬λ„ŒνŠΈλ‘œ 전달할 속성 이름 }}
  </template>
</child-component>

ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμΈ <child-component> νƒœκ·Έμ— μ§‘μ€‘ν•©λ‹ˆλ‹€. μœ„μ—μ„œ <slot> νƒœκ·Έλ₯Ό 미리 μ •μ˜ν•΄λ†¨κΈ° λ•Œλ¬Έμ— <child-component> νƒœκ·Έ 사이에 λ“€μ–΄κ°€λŠ” μ½”λ“œλŠ” λͺ¨λ‘ 슬둯으둜 μ²˜λ¦¬κ°€ λ©λ‹ˆλ‹€. μ—¬κΈ°μ„œ slot-scopeλΌλŠ” μ†μ„±μœΌλ‘œ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ˜¬λ €λ³΄λ‚΄μ€€ 데이터λ₯Ό 전달받을 수 μžˆμŠ΅λ‹ˆλ‹€.

slot-scope 속성이 μ •μ˜λœ <template> νƒœκ·ΈλŠ” μ‹€μ œ DOM이 μ•„λ‹ˆλΌ 속성을 전달받기 μœ„ν•œ 껍데기일 λΏμž…λ‹ˆλ‹€. μ‹€μ œλ‘œ ν™”λ©΄ λ Œλ”λ§μ΄ 되고 λ‚˜λ©΄ <template> νƒœκ·ΈλŠ” κ°€μ‹œμ μΈ νƒœκ·Έλ‘œ λ³€ν™˜λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

아직 μ•ˆ μ™€λ‹ΏμœΌμ‹€ 수 μžˆμœΌλ‹ˆ μ‹€μ œ 예제λ₯Ό 같이 μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.

슀μ½₯λ“œ 슬둯 μ½”λ“œ 예제

μ•žμ—μ„œ μ‚΄νŽ΄λ³Έ μ½”λ“œ ν˜•μ‹μ„ μ°Έκ³ ν•˜μ—¬ κ°„λ‹¨ν•œ 예제λ₯Ό μ œμž‘ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μƒμœ„ μ»΄ν¬λ„ŒνŠΈλŠ” App.vue이고 ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈλŠ” ChildComponent.vue μž…λ‹ˆλ‹€.

ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ μ½”λ“œλΆ€ν„° λ³΄κ² μŠ΅λ‹ˆλ‹€.





Β 













<!-- ChildComponent.vue -->
<template>
  <div>
    <h1>Child Component</h1>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
}
</script>

ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ— <slot> νƒœκ·Έλ₯Ό μ •μ˜ν•˜κ³  v-bind λ””λ ‰ν‹°λΈŒ(:)λ₯Ό μ΄μš©ν•˜μ—¬ message 속성을 μ „λ‹¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

μ΄λ²ˆμ—” μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ˜ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.





Β 
Β 
Β 














<!-- App.vue -->
<template>
  <div>
    <child-component>
      <template slot-scope="scopeProps">
        {{ scopeProps.message }}
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

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

ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμΈ <child-component> νƒœκ·Έμ˜ 슬둯 μ˜μ—­μ— slot-scope 속성을 μ •μ˜ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ—¬κΈ°μ„œ μ‚¬μš©ν•œ λ³€μˆ˜ scopePropsλŠ” ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ˜¬λ €μ€€ 값을 λ°›κΈ° μœ„ν•œ μž„μ˜μ˜ λ³€μˆ˜μž…λ‹ˆλ‹€. μž„μ˜μ˜ λ³€μˆ˜μ΄κΈ° λ•Œλ¬Έμ— μ›ν•˜λŠ” λ³€μˆ˜ λͺ…을 μ§€μ •ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. scopePropsμ—λŠ” ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ˜¬λ €μ€€ κ°’ message이 λ“€μ–΄μžˆμŠ΅λ‹ˆλ‹€.

μœ„μ˜ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ 결둠적으둜 <h1> 제λͺ© νƒœκ·Έμ™€ ν•¨κ»˜ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ message 값인 Helloκ°€ 화면에 좜λ ₯λ©λ‹ˆλ‹€.

λ·° 버전 2.6μ—μ„œ 슬둯의 문법이 v-slot λ””λ ‰ν‹°λΈŒλ‘œ 바뀐 μ΄μœ λŠ” 슀μ½₯슀 슬둯의 λ³€μˆ˜ μ ‘κ·Ό λ²”μœ„ λ•Œλ¬Έμž…λ‹ˆλ‹€. 일반 HTML νƒœκ·Έμ—μ„œ 슀μ½₯λ“œ μŠ¬λ‘―μ„ μ μš©ν•˜λ©΄ μ΄ν•΄ν•˜λŠ”λ° 크게 λ¬Έμ œκ°€ μ—†μœΌλ‚˜ μ»΄ν¬λ„ŒνŠΈ νƒœκ·Έμ— 슀μ½₯λ“œ μŠ¬λ‘―μ„ μ μš©ν•˜λŠ” 경우 λ³€μˆ˜μ˜ μ ‘κ·Ό λ²”μœ„μ— λŒ€ν•΄ ν˜Όλž€μ΄ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ, κΈ°μ‘΄ λ ˆκ±°μ‹œ μ½”λ“œμ™€ κ²ΉμΉ˜μ§€ μ•Šκ²Œ v-slot 및 #으둜 κ°œνŽΈν•˜μ˜€μŠ΅λ‹ˆλ‹€.

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