v-slot

 

• 개념
  • 부모가 자식의 UI를 결정, 컴포넌트 재사용성은 유지하고 커스터마이징이 필요한 부분을 분리하기 위함
  • 자식컴포넌트가 <slot name="slotName">을 정의
  • 부모컴포넌트에서 자식컴포넌트 사이에 <template v-slot:slotName> or #slotName의 template를 slot으로 보냄
  • name,#을 생략하면 default로 인식
• 부모가 보내는 게 없을 때
  • <slot>내용</slot>이 표시됨
• 흐름
  • 초기 설정 (자식 -> 부모):
    • 자식 컴포넌트가 <slot name="header">를 정의해.
    • 이게 "나는 'header'라는 이름의 슬롯이 있어"라고 선언하는 거야.
  • 템플릿 매칭 (부모 -> 자식):
    • 부모 컴포넌트가 v-slot:header를 사용해.
    • 이건 "나는 'header'라는 이름의 슬롯을 채우고 싶어"라고 하는 거야.
  • 데이터 전달 (자식 -> 부모):
    • 자식 컴포넌트가 슬롯에 데이터를 제공해: <slot name="header" :item="someData">.
• slot props
  • 자식컴포넌트에 props로 추가
    • <slot name="header">message="message"</slot>
  •  <template #header={message}>
    • 자식컴포넌트가 보낸 props를 전달받음 객체분해 or 변수설정(slotProps)