[Vue] Slot

1. Slot

컴포넌트의 재사용성을 높여주는 기능

특정 컴포넌트에 등록된 하위 컴포넌트의 마크업을 확장하거나 재정의할 수 있다.

 

 

2. Slot의 기초

<slot> 태그는 부모가 자식이 들어오기를 기대하는 위치에, 자리를 만들어놓는 것이다.

<!-- Parent 부모 컴포넌트-->
<template>
  <div>
     <SlotChild></SlotChild> <!-- 자식이 들어올 자리 -->
  </div>
</template>

<script>
import SlotChild from "@/components/SlotChild"

export default {
  components: {
    SlotChild
  },
};
</script>

<!-- Child 자식 컴포넌트 -->
<template>
  <div>
    <h1>안녕</h1>
  </div>
</template>

<script>
export default {
  name: 'SlotChild',
}
</script>

 

 

3. 이름이 있는 Slot

주의 사항 >> 

v-slot 디렉티브의 경우, 기존에 사용되던 slot 디렉티브와 다르게 반드시 <template>태그에 추가되어야 한다.

 

 

2.6.0 버전에서 새로 추가된 Slot관련 내용

Dynamic Slot Names : Dynamic directive arguments를 v-slot에서 사용할 수 있다.

<template v-slot:[dynamicSlotNames]>
  ...
</tmeplate>

 

Named Slots Shorthand : v-slot: 대신 #기호를 사용해서 간단하게 사용 할 수 있다.

<template #header>
 <h1>제목</h1>
</template>

<current-user #default="{ user }">
 {{ user.firstName }}
 </current-user>

 

 

 

 

4. Scope를 갖는 Slot

person을 사용하여 nickname 객체에 접근할 수 있다.

Tip >> v-slot:default는 슬롯에 name 속성을 붙이지 않은 영역에 표현된다.

 

 

 

<template #header="person" >
  <p>헤더 Slot {{ person.nickName}}</p>
</template>


// 구조 분해 문법(Destructuring) 표현도 가능 !!
<template #header="{ nickName }" >
  <p>헤더 Slot {{ nickName }}</p>
</template>

v-slot="person" 대신에 v-slot="{ nickName }"를 사용할 수 있다.

nickName 객체를 바인딩한 slot 하나를 header로 이름 붙여서 정의한다.

 

 

 

 

---

부모 > 자식

<!-- parent -->
<template>
  <div class="slot">
    <h1>slot</h1>

     <SlotComponent>
       <slot></slot>
     </SlotComponent>
    
  </div>
</template>

<script>
import SlotComponent from "@/components/SlotComponent";

export default {
  name: "Slot",
  components: {
    SlotComponent
  },
};
</script>

<template>
  <div>
    <slot>hello world</slot>
  </div>
</template>

<script>
export default defineComponent({
  name: "SlotComponent",
});
</script>

hello world 가 표시됨.

 

 

자식 > 부모

부모 컴포넌트에서는 v-slot:header  

자식 컴포넌트에서는 <slot name="header"></slot>  name으로 값을 넘겨준다.

<template>
  <div>
    <h1>slot</h1>

      <SlotComponent>
          <template v-slot:header>
            <p>header</p>
          </template>
      </SlotComponent>

  </div>
</template>

<script>
import SlotComponent from "@/components/SlotComponent";

export default {
  name: "Slot",
  components: {
    SlotComponent
  },
};
</script>

<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>

<script>
export default {
  name: "SlotComponent",
};
</script>

header가 표시됨.

 

 

 

 

 

참고

https://joshua1988.github.io/vue-camp/reuse/v-slot.html#v-slot-%E1%84%8B%E1%85%B3%E1%86%BC%E1%84%8B%E1%85%AD%E1%86%BC-%E1%84%91%E1%85%AD%E1%84%92%E1%85%A7%E1%86%AB-%E1%84%87%E1%85%A1%E1%86%BC%E1%84%89%E1%85%B5%E1%86%A8

https://stackoverflow.com/questions/56271244/vue-js-v-slot-in-single-file-component