[Vue] props 말고 slot

부모 컴포넌트로부터 자식컴포넌트로 데이터를 받아오는 방법으로 props 말고 slot이 있다.
props를 보내고 받고 사용하는 과정 없이도 직관적으로 데이터를 컴포넌트로 보낼 수 있다.

slot은 데이터 바인딩을 HTML에다가 할 때 사용한다.
속성 등에는 사용할 수 없다.

slot 문법 2가지 step

1. 자식 컴포넌트에서 <slot></slot> 영역 만들기
2. 부모 컴포넌트에서 자식컴포넌트 사이에 입력한 자료가 slot에 들어가게 된다.

1. 자식 컴포넌트에, 데이터를 받을 <slot></slot> 영역 만들기

(FilterBox.vue)

<template>
  <div class="filter-item" :class="`${filter}`" :style="{ backgroundImage : `url(${uploadImage})` }">
    <slot></slot>
  </div>
</template>

2. 부모 컴포넌트에서 자식컴포넌트 사이에 자료 입력

(Container.vue)

...
<div class="filters">
  <ul>
  <li class="filter-1" v-for="(a,i) in filter" :key="i">
    <FilterBox :uploadImage="uploadImage" :filter="a">
      <!-- FilterBox 컴포넌트의 slot 자리에 들어갈 데이터 -->
      {{ a }}
    </FilterBox>
  </li>
  </ul>
</div>
...

슬롯 여러 개 사용할 때

(FilterBox.vue)

<template>
  <div class="filter-item" :class="`${filter}`" :style="{ backgroundImage : `url(${uploadImage})` }">
    <p>
      <slot name="a"></slot>
      <slot name="b"></slot>
    </p>
  </div>
</template>

(Container.vue)

...
<ul>
  <li class="filter-1" v-for="(a,i) in filter" :key="i">
    <FilterBox :uploadImage="uploadImage" :filter="a">
      <!-- FilterBox 컴포넌트의 slot 자리에 들어갈 데이터 -->
      <template v-slot:a>{{ a }}</template>
      <template v-slot:b>{{ i }}</template>
    </FilterBox>
  </li>
</ul>
...