# Vue에서 slot 여부 판단하기

버튼에서 로딩 표시를 해야하는 경우가 있는데, 텍스트와 로딩 표시가 붙어서 나오는 경우를 대비해 `margin-right` 처리를 해줬다. 그런데 로딩만 표시하고 싶을 경우에도 `margin-right` 스타일이 적용되어 중앙 정렬이 되지 않는 현상이 있는데.. 이 경우에는 `$slots.default` 를 통해 `boolean` 값으로 여부를 확인하여 해당 스타일을 적용 및 미적용할 수 있다.

### 그런데 만약 다른 네임 스페이스의 슬롯 명이라면 어떻게 해야할까?

`$slots.header` , `$slots.footer` , `$slots.default` 와 같이 접근을 하여 판단할 수 있다.

```javascript
// Parent
<MyComponent>
  <template #header> Header </template>
  <template #footer> Footer </template>
</MyComponent>

// Child
$slot.header // truthy
$slot.footer // truthy
$slot.default // falsy (기본 콘텐츠 없음)

```

For the site tree, see the [root Markdown](https://slashpage.com/timmy.md).