Vue에서 slot 여부 판단하기
작성자
- 현우
작성시각
카테고리
Empty
상태
Empty
담당자
Empty
참여자
최근활동
버튼에서 로딩 표시를 해야하는 경우가 있는데, 텍스트와 로딩 표시가 붙어서 나오는 경우를 대비해 margin-right 처리를 해줬다. 그런데 로딩만 표시하고 싶을 경우에도 margin-right 스타일이 적용되어 중앙 정렬이 되지 않는 현상이 있는데.. 이 경우에는 $slots.default 를 통해 boolean 값으로 여부를 확인하여 해당 스타일을 적용 및 미적용할 수 있다.
그런데 만약 다른 네임 스페이스의 슬롯 명이라면 어떻게 해야할까?
$slots.header , $slots.footer , $slots.default 와 같이 접근을 하여 판단할 수 있다.
// Parent
<MyComponent>
<template #header> Header </template>
<template #footer> Footer </template>
</MyComponent>
// Child
$slot.header // truthy
$slot.footer // truthy
$slot.default // falsy (기본 콘텐츠 없음)
