[VUE] slot

2개 이상 슬롯 사용 시 순서를 지정하기 위해 부모는 template에 v-slot 디렉티브를, 자식은 slot에 name 사용하여 슬롯 지정이 가능합니다. v-bind는 : v-on는 @ v-slot은 # 약어 사용이 가능합니다.

부모 컴포넌트

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

<script>
import MyBtn from '~/components/MyBtn'
export default {
  components: {
    MyBtn
  }
}
</script>

자식 컴포넌트

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

<script>
export default {

}
</script>

<style scoped lang="scss">
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>