Slot에 대해서

Vue.js에서 슬롯(Slot)은 컴포넌트 간에 콘텐츠를 전달하고 재사용 가능한 컴포넌트를 만들 때 사용하는 중요한 개념입니다.

슬롯은 컴포넌트 내에서 콘텐츠를 삽입하거나 덮어쓸 수 있게 해주며, 컴포넌트의 유연성을 높이는 데 도움을 줍니다.

Vue.js에서는 기본 슬롯(Default Slot)과 명명된 슬롯(Named Slot) 두 가지 유형의 슬롯을 제공합니다.

자식의 컴포넌트에 <slot>이라는 컴포넌트를 넣을수있는 구멍(slot)을 준비한다

1. 기본 슬롯 (Default Slot):

- 기본 슬롯은 컴포넌트에 콘텐츠를 전달할 때 사용하는 가장 기본적인 슬롯입니다.

- 컴포넌트에 정의된 기본 슬롯에 콘텐츠가 전달되지 않으면 해당 컴포넌트의 기본 마크업이 사용됩니다.

- <slot> 태그를 사용하여 기본 슬롯을 정의합니다.

예제:

자식컴포넌트

<template>
   <div>
      <h1>
         <slot></slot> // 자식컴포넌트는 slot태그를 가진다
      </h1>
   </div>
</template>

부모컴포넌트

<MyComponent>
   This content will be placed inside the default slot. 
   해당 내용은 <slot></slot>의 내부에 표시되게 됩니다 
</MyComponent>

2. 명명된 슬롯 (Named Slot)

- 명명된 슬롯은 컴포넌트에 여러 개의 슬롯을 정의하고, 각 슬롯에 이름을 붙여서 사용하는 방식입니다.

- 슬롯에 이름을 붙여서 다른 위치에 콘텐츠를 삽입할 수 있습니다.

- <slot>`태그에 `name` 속성을 사용하여 명명된 슬롯을 정의하고, 콘텐츠를 넣을 때 `v-slot` 디렉티브 혹은 #슬롯명을 사용하여 해당 슬롯을 지정합니다.

- #슬롯명으로 지정할수있는 사실을 기억하자

예제:

자식컴포넌트 (MyComponent)

  <template>
    <div>
      <header><slot name="header"></slot></header>
      <main><slot name="content"></slot></main>
      <footer><slot name="footer"></slot></footer>
    </div>
  </template>

부모컴포넌트 (사용)

  <MyComponent>
    <template #header> <h1>This content will go in the header slot.</h1> </template>
    <template v-slot:content> This content will go in the content slot. </template>
    <template #footer> This content will go in the footer slot. </template>
  </MyComponent>

이렇게 명명된 슬롯을 사용하면 컴포넌트에 여러 영역에 콘텐츠를 삽입할 수 있어 더욱 다양하고 유연한 컴포넌트를 작성할 수 있습니다.

참조

slot에 대해서