Jae Front-end Study

slot, 슬롯이란

컴포넌트를 랜더링 할 때 html로 작성한 코드가 컴포넌트의 <slot></slot> 부분으로 교체된다.

1. 레이아웃 컴포넌트 만들기

• components/layout/TheLayout.vue

<header>, <footer>는 공통으로 사용하고, <main> 영역만 변경하고 싶어 <slot>을 사용했다.

<template>
  <div>
    <header>헤더</header>

    <main>
      <slot/>
    </main>

    <footer>푸터</footer>
  </div>
</template>

<script>
export default {
  name: 'TheLayout'
}
</script>

2. 레이아웃 컴포넌트 import 시키기

• pages/index.vue

<h1> 이라고 작성한 부분이 <TheLayout> 컴포넌트의 <slot> 영역으로 교체된다.

<template>
  <TheLayout>
    <h1>메인 페이지</h1>
  </TheLayout>
</template>

<script>
import TheLayout from "@/components/layout/TheLayout"

export default {
  name: 'Main',

  components: {
    TheLayout
  }
}
</script>

3. 결과 화면