20_slot

1. slot 

: 부모 컨포넌트에서 제공하는 콘텐츠를 나타낼 때 사용(HTML, 컴포넌트 등)

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

<!--- 부모 컴포넌트에서 전달 --->
<FancyButton>
	<!-- 슬롯 콘텐츠 -->
	Click!!
</FancyButton>

<!--- 최종 랜더링 된 모습 --->
<FancyButton>
	<!-- 슬롯 콘텐츠 -->
  <span style="color: red">Click me</span>
  <i>!</i>
</FancyButton>

 

 

2. Fallback Content 

: 상위 컴포넌트에서 슬롯 컨텐츠가 제공되지 않을 때 슬롯에 대한 기본컨텐츠(폴백)을 지정할 수 있음

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

 

 

3. Named Slots

:slot요소에 이름을 부여해서 여러개의 slot 정의가 가능함.

- slot에 name 속성을 부여하여 특정 슬롯 컨텐츠가 랜더링 되어야할 위치를 설정해줌

- name이 없는 경우 암시적으로 default.

- name이 부여된 slot 컨텐츠를 전달하려면 v-slot 을 사용하여 전달할 수 있음. 단축표현 #

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


<!-- 부모 컴포넌트 사용 예시 -->
<template>
  <BaseCard>
    <template v-slot:header>제목</template>
    <template v-slot:default>안녕하세요</template>
	<template v-slot:footer>푸터</template>
  </BaseCard>
</template>

 

 

4. Dynamic Slot Named 

v-slot 디렉티브 전달인자에 데이터 바인딩해서 동적으로 변경 가능함.

<BaseCard>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>

  <!-- with shorthand -->
  <template #[dynamicSlotName]>
    ...
  </template>
</BaseCard>

 

 

5. Render Scope

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

 

->Scoped Slots 을 사용하여 상위컴포넌트와 하위 컴포넌트 데이터를 모두 사용할 수 있다. 하위 컴포넌트에서 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 World!');
    const count = ref(1);
    return {
      greetingMessage,
      count,
    };
  },
};
</script>

 

 

default <slot>이 하나 밖에 없는 경우는 v-slot 디렉티브를 이용하여 props를 전달받을 수 있음

<MyComponent v-slot="slotProps">
  {{ slotProps.text }} {{ slotProps.count }}
</MyComponent>

//구조분해할당 문법으로 더 편하게 받을 수 있음
<MyComponent v-slot="{ text, count }">
  {{ text }} {{ count }}
</MyComponent>

 

 

6. Named Scoped Slots

이름이 부여된 슬롯도 유사하게 작동함. v-slot : name="slotProps"

<MyComponent>
  <template #header="headerProps">
    {{ headerProps }}
  </template>

  <template #default="defaultProps">
    {{ defaultProps }}
  </template>

  <template #footer="footerProps">
    {{ footerProps }}
  </template>
</MyComponent>