버튼에서 로딩 표시를 해야하는 경우가 있는데, 텍스트와 로딩 표시가 붙어서 나오는 경우를 대비해 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 (기본 콘텐츠 없음)

Open channel

Made with Slashpage