[Vue] slots

자식컴포넌트를 재활용하여 각각의 부모컴포넌트에서 쓸 수 있다.

 

사용법

 

1) 부모 컴포넌트에서 자식 컴포넌트의 태그 사이에 자식컴포넌트에 주고자 하는 데이터를 쓴다.

부모.vue

<자식 컴포넌트>
  <a>data</a>  <-- 부모컴포넌트에서 자식컴포넌트로 주고자 하는 데이터
</자식컴포넌트>

 

자식.vue

<template>
  <div>
    <p>header</p>
    <slot></slot>    <---- 이 부분에 부모 컴포넌트에서 지정한 <a>data</a> 가 들어가게 된다.
    <p>body</p>
  </div>
</template>

 

 

2) 자식 컴포넌트에서 <slot></slot> 태그 사용, slot에 name 값을 주어 slot별로 데이터 사용 가능

부모.vue

<자식 컴포넌트>
  <template v-slot:header(자식컴포넌트에 들어갈 이름)>
    <a>header data</a>(부모컴포넌트에서 자식컴포넌트로 주고자 하는 데이터)
  </template>
  <template v-slot:body(자식컴포넌트에 들어갈 이름)>
    <a>body data</a>(부모컴포넌트에서 자식컴포넌트로 주고자 하는 데이터)
  </template>
</자식컴포넌트>

 

* v-slot: 대신 #으로 대체 가능하다. v-slot:header = #header

 

자식.vue

<template>
  <div>
    <p>header</p>
    <slot name="header"></slot>    <---- 이 부분에 부모 컴포넌트에서 지정한 <a>header data</a> 가 들어가게 된다.
    <p>body</p>
    <slot name="body"></slot>      <---- 이 부분에 부모 컴포넌트에서 지정한 <a>body data</a> 가 들어가게 된다.
  </div>
</template>

 

 

3) 자식에 있는 data 값을 받아서 다시 자식으로 보내주는 방법

부모.vue

<자식 컴포넌트>
  <template v-slot:header="props(아무 이름 가능)">
    <a>header data {{ props.chid }}</a>(부모컴포넌트에서 자식컴포넌트로 주고자 하는 데이터)
  </template>
  <template v-slot:body>
    <a>body data</a>(부모컴포넌트에서 자식컴포넌트로 주고자 하는 데이터)
  </template>
</자식컴포넌트>

 

* v-slot: 대신 #으로 대체 가능하다. v-slot:header = #header

 

자식.vue

<template>
  <div>
    <p>header</p>
    <slot name="header" :chid="chidData"></slot>    <---- 이 부분에 부모 컴포넌트에서 지정한 <a>header data</a> 가 들어가게 된다.
    <p>body</p>
    <slot name="body"></slot>      <---- 이 부분에 부모 컴포넌트에서 지정한 <a>body data</a> 가 들어가게 된다.
  </div>
</template>

 

자식.js

data() {
  return {
    chidData: 'abcd'
  }
}

 

순서

1. 자식 컴포넌트에서 :child(넘어갈 이름)="chidData(넘어갈 데이터 이름)" 을 통해 부모 컴포넌트에 데이터 전달

2. 부모 컴포넌트에서 {{ props.chid }} 를 통해 자식 컴포넌트에 기존에 있는 데이터와 자식으로 부터 받은 데이터 전달

3. 자식 컴포넌트가 slot을 통해 부모 컴포넌트에서 표현