[Vue] slot props

자식데이터 -> 부모 컴포넌트에서 사용
자식 컴포넌트의 데이터를 부모 컴포넌트에서 사용하고 싶을 때 slot props 문법이 있다.

자식 컴포넌트에 데이터가 있다고 가정하자.
<slot :msg="msg"></slot>

(FilterBox.vue)

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

...

export default {
  name: 'compFilterBox',
  data(){
    return {
      msg: 'hello'
    }
  },
  props: {
    uploadImage: String,
    filter: String,
  }
}

부모 컴포넌트 에서는
<template v-slot:default="작명">{{ 작명.msg }}</template>
‘작명’ 변수 안에 자식컴포넌트로부터 받은 데이터가 모두 들어있다.

(Container.vue)

...
<ul>
  <li class="filter-1" v-for="(a,i) in filter" :key="i">
    <FilterBox :uploadImage="uploadImage" :filter="a">
      <template v-slot:default="작명">{{ 작명.msg }}</template>
    </FilterBox>
  </li>
</ul>
...