v-slot 을 이용한 UI 커스터마이징

향후 수정 필요

 

<template> 아래 <slot>이라는 태그를 사용하면 그 부분을 외부에서 만든 html로 치환이 가능하다.

 

아래의 예시는 Button에서 Label을 외부에서 변경하는 간단한 예시이다. 

<!-- BaseButton.vue -->
<template>
  <button class="base-button">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'BaseButton'
};
</script>

 

위에서 만든 BaseButton 컴포넌트의 slot 부분을 변경하려면, 사용하는 vue에서 <Template v-slot>으로 입력하면 BaseButton의 <slot>부분이 치환이 된다.

<template>
  <BaseButton>
    <template v-slot>
      <span>Click me!</span>
    </template>
  </BaseButton>
</template>

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