💻 Slots

HTML 요소와 마찬가지로 우리가 만든 컴포넌트에 콘텐츠를 전달할 수 있으면 유용하다. <FancyButton>컴포넌트를 만든 후 콘텐츠를 전달해보자.

<!-- FancyButton.vue -->
<template>
  <button class="fancy-btn">
  	<slot></slot>
  </button>
</template>

-> Style
위에 정의한 컴포넌트를 부모 컴포넌트에 사용해보자

<FancyButton>
	<!-- 슬롯 콘텐츠 -->
  	Click!!
</FancyButton>

slot 요소는 부모 컴포넌트에서 제공하는 콘텐츠를 나타내는 슬롯 콘텐츠다. 그리고 슬롯은 텍스트 뿐만아니라 HTML요소, 컴포넌트 등 다양한 모든 콘텐츠가 될 수 있다.

Named Slots

<slot> 요소에 이름을 부여하여 여러개의 <slot>을 정의할 수 있다.

<!-- BaseCard.vue -->
<template>
  <article>
    <div>
      <slot name="header"></slot>
    </div>
    <div>
      <slot></slot>
    </div>
    <div>
      <slot name="footer"></slot>
    </div>
  </article>
</template>

• slot에 name 속성을 부여하여 특정 슬롯 콘텐츠가 렌더링 되어야 할 위치를 설정할 수 있다.
• name이 없는 <slot>의 이름은 암시적으로 default다.

<!-- 부모 컴포넌트 사용 예시 -->
<template>
  <BaseCard>
    <template v-slot:hedaer>제목</template>
    <template v-slot:default>내용</template>
    <template v-slot:footer>푸터</template>
  </BaseCard>
</template>

위 예시처럼 name이 부여된 <slot>에 콘텐츠를 전달하려면 v-slot 디렉티브를 사용하여 전달할 수 있다. 그리고 v-slot:전달인자를 사용하여 지정한 슬롯 콘텐츠에 전달할 수 있다.

v-slot은 # 단축키로 표현할 수 이있다.

<!-- 부모 컴포넌트 사용 예시 -->
<template>
  <BaseCard>
    <template #hedaer>제목</template>
    <template #default>내용</template>
    <template #footer>푸터</template>
  </BaseCard>
</template>

그리고 default 슬롯은 암시적으로 처리할 수 있다.

<!-- 부모 컴포넌트 사용 예시 -->
<template>
  <BaseCard>
    <template #hedaer>제목</template>
    <!-- 암시적으로 default slot -->
    내용
    <template #footer>푸터</template>
  </BaseCard>
</template>

Render Scope

슬롯 콘텐츠는 상위 컴포넌트에 정의되어 있으므로 상위 컴포넌트의 데이터 영역에 접근은 가능하지만 하위 컴포넌트의 영역에는 접근할 수 없다.

Scoped Slots

Render Scope에서 언급했던 것처럼 슬롯 콘텐츠는 자식 컴포넌트의 데이터에 접근할 수 없다. 하지만 슬롯 콘텐츠에서 상위 컴포넌트와 하위 컴포넌트 데이터를 모두 사용할 수 있다면 우리는 개발할 때 매우 유용하다. 이러한 방법으로 우리는 자식 컴포넌트에서 <slot> 요소를 사용할 때 props를 전달하는 것처럼 속성을 슬롯 콘텐츠에 전달할 수 있다.

<!-- MyComponent.vue -->
<template>
  <div>
    <slot :text="greetingMessage" :count="count"></slot>
  </div>
</template>

<script>
  import { ref } from 'vue';
  
  export default {
  	setup() {
  		const greetingMessage = ref('Hello!!');
  		const count = ref(1);
  		return{ greetingMessage, count};
  	},
  };
</script>