컴포넌트 - slot

slot: 부모요소의 텍스트가 없을 때 component에 slot에 입력된 데이터가 출력된다.(Fallback Contents)

 

v-slot 속성을 이용하여 컴포넌트에 데이터를 출력할 수 있다

 

v-slot을 약어로 '#'으로 사용할 수 있다.

v-on: '@'

v-bind: ':'

 

컴포넌트 코드

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

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

</style>

 

App.vue 코드

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

<script lang="ts">
import MyBtn from '~/components/MyBtn4'
export default {
  components: {
    MyBtn
  }
}
</script>

 

브라우저 확인