18. slot

1. slot은 언제 사용?

<KossieCoder /> 이렇게 바로 닫는 태그 말고,

<KossieCoder></KossieCoder> 이렇게 하고 중간에 코드를 작성하면 slot안으로 들어가게 된다.

 

<slot></slot>을 쓰면 여기에만 원하는 코드를 넣을 수 있다.

 

AboutView.vue

<template>
 <div>
  <h1>This is an about page</h1>
  <KossieCoder> <!--열고닫는태그중간에 코드를 작성하면 slot안으로 들어가게 된다.-->
   <div>
    <h1>hello</h1>
    <p>hi</p>
   </div>
   <div>fdfdfdfd</div>
  </KossieCoder>
 </div>
</template>
<script>
import KossieCoder from "@/components/KossieCoder.vue";
export default {
 components: {
  KossieCoder,
 }
}
</script>

 

<slot>부분에 <KossieCoder></KossieCoder> 안에 있는 코드들이 삽입됨.

 

 

KossieCoder.vue

 

2. 두군데로 나눠서 원하는 코드를 넣을 수 있다.

slot마다 다른 내용을 넣고싶다. name을 넣을 수 있다.

 

 

AboutView.vue

<template>
 <div>
  <h1>This is an about page</h1>
  <KossieCoder>
   <template v-slot:header> <!--이건 KossieCoder컴포넌트에서 name="header"인 곳으로 들어간다.-->
   <!--v-slot:header대신 #header를 넣을 수 있다.-->
    <p>header11</p>
   </template>
   hello <!--이건 그냥 <slot></slot>으로 들어간다.-->
   <!--그냥 hello대신, 아래와 같이 넣을 수도있다.-->
  <template v-slot:default> <!--이것 대신 #default 이렇게 적어도된다.-->
  hello
  </template>
  </KossieCoder>
 </div>
</template>

 

KossieCoder.vue

<template>
 <div>
  <p>header</p>
  <slot name="header"></slot> <!--이 부분에 v-slot:header가 적힌 부분이 들어온다.-->
  <p>Body</p>
  <slot></slot>
  <p>footer</p>
 </div>
</template>

 

 

3. header111 뒤에 어떠한 글자를 넣고 싶다.

즉, 하위 컴포넌트의 데이터를 상위 컴포넌트에서 출력되게 하고싶다.

KossieCoder.vue에서 data(){return } 여기 안에 kossie: 이렇게 해도 data를 넘겨줄 수 없다.

 

slot에 원하는 데이터를 넣어준다.

 

KossieCoder.vue

<template>
 <div>
  <p>header</p>
  <slot name="header" :kossie="kossie"></slot> <!--kossie라는 이름으로 부모 컴포넌트로 올려준다.-->
  <p>Body</p>
  <slot></slot>
  <p>footer</p>
 </div>
</template>
<script>
export default {
 data(){
  return {
    kossie: 'coder'
  }
 }
}

</script>

 

 

AboutView.vue

<template>
 <div>
  <h1>This is an about page</h1>
  <KossieCoder>
   <template #header="props"> <!--2.slot을 올려준 곳에 아무 변수명을 적는다. 이 변수명을 통해 값을 받아온다.-->
    <p>header111 {{ props.kossie }}</p> <!--props뒤에 올려준 값을 적는다.-->
   </template>
   <template #default>hello222</template>
  </KossieCoder>
 </div>
</template>
<script></script>

 

구조분해를 해서 사용해도 된다.

<template>
 <div>
  <h1>This is an about page</h1>
  <KossieCoder>
   <template #header="{kossie}"> <!--2.slot을 올려준 곳에 아무 변수명을 적는다. 이 변수명을 통해 값을 받아온다.-->
    <p>header111 {{ kossie }}</p> <!--props뒤에 올려준 값을 적는다.-->
   </template>
   <template #default>hello222</template>
  </KossieCoder>
 </div>
</template>
<script></script>

 

**모든 내용의 출처는 Kossie Coder입니다.