컴포넌트를 사용시 기본적으로 content 를 삽입하게 되면 해당하는 slot tag 가 전부 다 content 로
대체되서 화면에 나타난다.

컴포넌트의 content 가 없는 경우에는 slot 의 content 로 대체한다.
이를 **Fallback Contents** 라고 한다.

// App.vue
<template>
  <MyBtn>
    Banana
  </MyBtn>
</template>

==========================
// SlotTest.vue
<template>
  <div
    class="btn">
    <slot>Apple</slot>
  </div>
</template>

// Banana 가 뜰 것이다. Banana 가 비어있다면 Apple 이 대체되서 나올 것이다.

slot 에서 대체되는 내용이 순서를 보장받고 싶다면 v-slot 을 사용할 수 있다.
이를 **Named Slots**, **이름을 갖는 슬롯**이라고 한다. 그리고 이는 #으로 줄일 수 있다.

v-bind: -> :
v-on: -> @
v-slot: -> #

// App.vue
<template>
  <MyBtn>
    <template #text>
      <span>Banana</span>
    </template>
    <template #icon>
      <span>(B)</span>
    </template>
  </MyBtn>
</template>

==========================
// SlotTest.vue
<template>
  <div
    class="btn">
    <slot name="icon"></slot>
    <slot name="text"></slot>
  </div>
</template>

// 컴포넌트에서 Banana 다음에 B 를 출력하지만 실제 화면에는 **(B)Banana** 라고 출력된다.