[Vue.js] props 대신 slot 사용해보기

💡 실습 포인트!

• slot 을 사용해서 필터가 씌워진 이미지들에 각각에 해당하는 필터 이름을 붙여보았다.
• 기존에 만들어놓은 레이아웃에 slot 만 추가했더니 필터가 씌워진 이미지 위에 필터 이름이 겹쳐나와서 FilterBox.vue 파일의 레이아웃을 전반적으로 수정해주었다.
• 그러고 나서, 작은 이미지들에 필터가 적용이 안되는 상황이 발생했는데, 이는 Container.vue 에서 반복문을 돌릴 때 filter 요소들을 data 보관함에 저장했다가 props 문법으로 FilterBox.vue 로 받아와서 등록한 뒤 사용하니 정상적으로 필터가 각 이미지에 적용이 되었다.
  (이후, App.vue 에서도 filter 항목을 사용할 일이 생겨 기존의 Container.vue 에 있던 data 보관함의 filter 항목을 App.vue 로 옮겨주고 모든 하위 Component 에는 props 문법을 이용하여 전송해주었다.)
• slot 을 통해 적용한 필터 이름의 경우 기본적으로 왼쪽 정렬이었는데, <slot></slot> 은 이 자체로 css 스타일링이 제대로 되지 않으므로 <div></div> 에 담아서 가운데 정렬을 해주었다.

---

💜 들어가기 전에

<div :class="데이터" class="filter-item"> </div>

• Vue 에서는 위와 같이 html 태그 안에 class="" 형식으로 여러 개의 클래스를 만들어 사용할 수 있다.

---

💜 slot 문법 알아보기

• 자식 Component 가 부모 Component 의 데이터를 사용하고 싶으면 일반적으로 props 로 전송받아야 한다.
• 그리고 전송받은 데이터를 등록해야 사용이 가능하다.
• 위와 같이 props 문법의 사용이 귀찮을 때 대용으로 사용할 수 있는 간편한 문법이 바로  slot 문법이다.

🤍 slot 문법 사용하기

• 자식 Component 에 데이터가 들어갈 위치를 정해서 <slot></slot> 이라는 html 태그를 작성한다.
• 부모 Component 에서 <자식 Component></자식 Component> 사이에 자식 Component 에 전송할 데이터를 작성한다.
• 위의 과정을 거치면 따로 등록하는 과정 필요없이 부모 Component 가 가진 데이터가 자식 Component 내의 <slot></slot> 사이에 들어가게 된다.
• 다만, props 는 src 나 style 속성에도 사용이 가능하지만, slot 은 딱 html 태그 사이에 내용을 작성하듯 사용이 가능하다.

---

🤍 Named Slots

• 부모 Component 에서 전송할 데이터가 많아서 여러개의 <slot></slot> 을 사용해야 하는 경우 각각 구분하기 위해 name 속성을 추가하여 사용해야 하는 경우가 발생하는데, 이렇게 사용하는 방법을 Named Slots 이라고 한다.

 

<slot name="a"></slot>

• 자식 Component 는 위와 같이 name 을 원하는 대로 설정이 가능하다.

 

<자식 Component>
  <template v-slot:a>데이터</template>
</자식 Component>

• 그러면 부모 Component 에서는 <자식 Component></자식 Component> 사이에 <template v-slot:자식_Component에_적은_이름>전송할_데이터</template> 의 형식으로 코드를 작성하여 특정 자식 Component 로 데이터를 보낼 수 있는 것이다.

---

🤍 Slot Props

• 부모 Component 도 가끔 자식 Component 의 데이터를 가져와 사용하고 싶을 때가 있는데, 그럴 때 사용하는 것이 Slot Props 이다.

 

<slot :데이터="데이터"></slot>

• 자식 Component 는 slot 을 사용할 때 위와 같이 코드를 작성하여 데이터를 부모 Component 로 보낼 수 있다.

 

<자식 Component>
  <template v-slot:default="작명"> {{작명.데이터}}</template>
</자식 Component>

• 이제 부모 Component 가 자식 Component 로부터 전송받은 데이터를 사용하고 싶으면, v-slot: 옆에 default 와 받은 데이터들을 통칭할 이름을 지정해서 같이 적어준다.
• 이제 받아온 데이터는 지정한 이름에 저장이 되고 이는 object 타입이기 때문에, 데이터를 꺼내어 사용할 때에도 object 타입에서 데이터를 꺼내듯 사용하면 된다.