24. Vue - slot 태그

- 이전 포스팅에서 slot태그를 이용하여 컴포넌트 내용을 출력하였다. 

- 이번 포스팅에서는 slot태그에 관하여 조금 더 알아보자. 

 

1. Fallback content

 

[App.vue]

<template>
  <MyBtn>
    Banana
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'
export default {
  components: {
    MyBtn
  }
}
</script> 

 

[MyBtn.vue]

<template>
  <div class="btn">
    <slot></slot>
  </div>
</template> 
ㅌ
<script>
export default {
}
</script>

<style scoped lang="scss">
  .btn {
    display: inline-block;
    margin: 4px;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: gray;
    color: white;
    cursor: pointer;
  }
</style>

 

[작동순서]

클릭하면 확대됩니다.

 

a) slot 태그 사이에 내용이 있는 경우

 

[출력화면]

- 반드시 컴포넌트에 내용(=content)을 삽입해야만 slot태그에서 출력이 되는 것이 아니다. 

- 위의 예시처럼 slot 태그 자체에 내용(=content)을 삽입하여 출력할수도 있다.  

 

b) slot 태그 사이에 내용이 있고 컴포넌트에도 내용이 있는 경우

 

[출력화면]

- 컴포넌트와 slot태그 모두 content를 포함하고 있는 경우, 위의 예시처럼 컴포넌트의 내용이 우선적으로 출력된다. 

- slot 태그에 입력되는 content는 default 값처럼 작동한다.

- 컴포넌트에 content가 존재하면, 해당 컴포넌트의 content가 출력된다. 

- 컴포넌트에 content가 없다면, slot태그의 content가 출력된다.

 

*Fallback(= 대체) content

- slot태그에 삽입되어있는 content를 부르는 용어

- 컴포넌트에 content가 없을 때, slot 태그에서 출력되는 content를 의미한다.

 

---

2. Named slot

 

a) 예제 1

[예제코드]

 

[출력화면]

- MyBtn 컴포넌트 사이의 span태그 두개가 위의 사진처럼 순서대로 출력되는 것을 확인할 수 있다.

- 만약 이 span 태그가 출력되는 순서가 중요하다면, 그 순서를 직접 정해줄 수 있는데 이를 named slot이라고 한다. 

- 이름을 갖는 slot이라고 부른다. 

 

b) v-slot → #(v-slot의 약어) 

- 우선 문자열의 구분을 위해 (B) 내용을 icon이라고 하자. Banana는 그냥 text라고 하자. 

- 항상 icon 다음에 text가 출력되도록 설정해보자. 

 

- 하지만, 위의 코드는 제대로 작동하지 않고 에러를 발생시킨다. 

- 에러가 발생되는 이유는 v-slot이라는 이름의 라이브러리가 존재하지 않기 때문이다. 

- 원래 이름은 v-slot이 맞지만, Vue에서는 축약어인 샵(#) 기호를 쓰도록 한다. 

 

 

[출력화면]

 [순서가 보장된다는 의미]

- 위의 코드 사진처럼 App.vue의 태그 순서가 변경되더라도 출력 내용은 변하지 않는다.

- MyBtn.vue에서 이미 slot에 해당 이름을 할당해놓았기 때문에 동일하게 icon부터 출력되게 된다.