[Vue] props 대신 slot을 써보자

 slot으로 부모 -> 자식 데이터 전송법

 

FilterBox.vue (자식)

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

1. 자식 컴포넌트에서 데이터를 받아오고 싶은 곳에 을 넣는다. (출력될 위치)

 

Container.vue (부모)

<FilterBox :filter="filter" :image="image" v-for="filter in filters" :key="filter">
  <span>{{filter}}</span>
</FilterBox>

2. <컴포넌트></컴포넌트> 태그사이에 데이터를 넣는다.

 

 slot 여러개 사용하기

 

name 속성을 주면 된다. (복잡하니 그냥 props 쓰자)

 

FilterBox.vue (자식)

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

1. <slot name="작명"></slot>

 

Container.vue (부모)

<FilterBox>
  <template v-slot:a> 데이터1 </template>
  <template v-slot:b> 데이터2 </template>
</FilterBox>

 

2. <template v-slot:작명>보낼거</template>

 

 

 slot props

 

slot 사용할 때 부모가 자식데이터 필요한 경우.

 

FilterBox.vue (자식)

<template>
  <div>
   <slot :msg="msg"></slot>
  </div>
</template>

<script>
export default {
  name : 'filterbox',
  data(){
    return{
      msg : 'hello'
    }
  },
}
</script>

1. <slot :자식데이터="자식데이터">

 

Container.vue (부모)

<FilterBox>
  <template v-slot:default="작명"> <span>{{작명.msg}}</span> </template>
</FilterBox>

2. 부모는 <template v-slot="작명">{{작명.자식데이터}}</template>

 

 

 slot의 한계

 

slot은 HTML에만 가능하고 속성안에는 쓸 수 없다. <div 안에서 <slot></slot>속성으로 못씀>

즉, 간단히 전송하고 싶거나 태그로 담아서 데이터를 전송하고 싶을 때 사용하자.