μŠ¬λ‘―μ„ μ΄μš©ν•œ μ»΄ν¬λ„ŒνŠΈ ν…œν”Œλ¦Ώ ν™•μž₯

μ„Έ 번째둜 μ‚΄νŽ΄λ³Ό μ»΄ν¬λ„ŒνŠΈ λ””μžμΈ νŒ¨ν„΄μ€ μŠ¬λ‘―μ„ μ΄μš©ν•œ μ»΄ν¬λ„ŒνŠΈ 섀계 λ°©λ²•μž…λ‹ˆλ‹€. 슬둯 μ±•ν„°μ—μ„œ 이미 μ‚΄νŽ΄λ΄€λ“―μ΄ μŠ¬λ‘―μ€ ν•˜μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ ν…œν”Œλ¦Ώμ„ μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μœ μ—°ν•˜κ²Œ ν™•μž₯ν•  수 μžˆλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€.

μŠ¬λ‘―μ€ νƒ­, λͺ¨λ‹¬(νŒμ—…), λ²„νŠΌ λ“± ν”νžˆ μ‚¬μš©λ˜λŠ” UI μ»΄ν¬λ„ŒνŠΈλ₯Ό λͺ¨λ‘ μž¬μ‚¬μš© ν•  수 있게 λ„μ™€μ€λ‹ˆλ‹€. μ˜ˆμ‹œ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄κ² μŠ΅λ‹ˆλ‹€.




Β 



<!-- BaseButton.vue -->
<template>
  <button type="button" class="btn primary">
    <slot></slot>
  </button>
</template>




Β 

Β 
Β 
Β 
Β 













<!-- App.vue -->
<template>
  <div>
    <!-- ν…μŠ€νŠΈλ‘œ λ²„νŠΌ μ΄λ¦„λ§Œ μ •μ˜ -->
    <base-button>Show Alert</base-button>
    <!-- μ•„μ΄μ½˜κ³Ό ν…μŠ€νŠΈλ‘œ λ²„νŠΌμ˜ UI ν™•μž₯ -->
    <base-button>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg>
      Download
    </base-button>
  </div>
</template>

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

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

μœ„ μ½”λ“œλŠ” λ²„νŠΌμ˜ μ΅œμ†Œ λ§ˆν¬μ—…μ„ κ°–λŠ” BaseButton μ»΄ν¬λ„ŒνŠΈλ₯Ό μƒμ„±ν•œ ν›„ μŠ¬λ‘―μ„ μ΄μš©ν•˜μ—¬ λ²„νŠΌμ˜ λ‚΄μš©μ΄ ν™•μž₯될 수 있게 κ΅¬μ‘°ν™”ν•œ μ½”λ“œμž…λ‹ˆλ‹€. BaseButton.vueμ—μ„œ <slot> νƒœκ·Έλ₯Ό 넣어놨기 λ•Œλ¬Έμ— BaseButton μ»΄ν¬λ„ŒνŠΈλ₯Ό λ“±λ‘ν•˜μ—¬ μ‚¬μš©ν•  λ•Œ μƒμœ„ μ»΄ν¬λ„ŒνŠΈμ—μ„œ ν…μŠ€νŠΈλ₯Ό λ„£μ–΄ λ²„νŠΌμ˜ μ΄λ¦„λ§Œ λ°”κΎΈκ±°λ‚˜, ν…μŠ€νŠΈμ™€ μ•„μ΄μ½˜μ„ ν•¨κ»˜ λ„£μ–΄ λ²„νŠΌμ˜ UIλ₯Ό κΎΈλ°€ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.