[vue.js] slot으로 데이터 전송

지금부터 해볼거는 사진 위에 필터명을 표기해보자

필터명을 부모로 부터 받아와서 표기만 해주면됨

원래였으면 props 사용했겠지만 완전 편한 slot을 사용해보자

보다 직관적으로 데이터를 전송할 수 있다

---

slot

전송 방법이 그래서 뭔디

1. 자식은 구멍뚫기
2. 컴포넌트 태그 사이에 데이터 넣기

자식은 구멍 뚫기

<template>
  <div :class="필터 +' filter-item'" :style="`background-image:url(${이미지})`">
    <slot></slot>
  </div> 
</template>

컴포넌트 태그 사이에 데이터 넣기

    <FilterBox v-for="(필터, index) in 필터들" :key="index" :이미지="이미지" :필터="필터">
    데이터~~
    </FilterBox>

이런식으로 하면 전달이 잘됨

<!-- 필터선택페이지 -->
<div v-if="step == 1">
  <div class="upload-image" :style="`background-image:url(${이미지})`"></div>
  <div class="filters">
    <FilterBox v-for="(필터, index) in 필터들" :key="index" :이미지="이미지" :필터="필터">
    {{필터}}
    </FilterBox>
  </div>
</div>

이런식으로 우리는 이미 반복문으로 필터 라는 이름으로 필터명을 사용하고 있기에 바인딩해주면 결과가 바로나옴

slot 여러개 사용하는 법

이런식으로 a b 처럼 이름을 구분해서 사용하면 댐

아니면 이런식으로 사용하면댐

---

한계

태그 안에 데이터 바인딩 할 때만 slot이 사용가능하다

데이터를 직접적으로 전달할때는 props 쓰셈

너무 많은 데이터를 부모자식간에 전송할때는 오히려 slot이 복잡하다

---

추가적 문법 : slot props

부모가 slot으로 데이터를 전해줄 때 가끔 자식의 데이터를 사용하고 싶을 때가 있음

1. 자식컴포넌트는 slot을 사용할 때

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

이러면 자식이 가진 데이터를 부모로 보낼 수 있다.

2. 그러면 부모는 이걸 사용하고 싶으면

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

v-slot: 옆에 default라고 적으면 자식이 보낸 데이터 수신이 가능하다

그걸 slot사용할 때 자유롭게 활용 가능합니다.