[Vue3] v-slot

• slot
• scoped slot
• v-slot

 

 

요즘 Vue에 대해 공부 중이다 ^^a... (?)

 

일단 오늘 아침에는 slot에 대해 좀 찾아보았다 ..

 

 

 

 

기존 <slot> 태그는 이렇게 사용했다.

[Parent.vue]

<template>
  <div>
    <slot></slot>
  </div>
</template>


[Child.vue]

<template>
  <Parent>
    <p>자식컴포넌트의 내용</p>
  </Parent>
</template>

 

<p>태그 내용이 Parent.vue의 <slot> 자리로 들어갔다.

 

 

 

 

이후 Vue 2.5 에서 scopedSlot 이 나왔다.

자식 컴포넌트에서 이걸 전달해줄게~ 하는 것

 

[자식 컴포넌트]

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

 
[부모 컴포넌트]

<template slot-scope="props">
  <p>{{ props.msg }}</p>
</template>

 

 

근데scoped slot는 반드시 <template> 에 써야했고, 이후 바로 쓸 수 있게 수정되었다.

일반 태그에도 사용할 수 있고

컴포넌트 태그에도 사용할 수 있다.

 

<foo>
  <template slot-scope="fooProps">
    <div>{{ fooProps }}</div>
  </template>
</foo>

↓

<foo >
  <div slot-scope="fooProps">{{ fooProps }}</div>
</foo>

또는

<foo slot-scope="fooProps">
  {{ fooProps }}
</fooj>

 

 

 

v-slot

 

 

<template>
  <Child>
    <template v-slot:default="props">
      <p>{{ props.msg }}</p>
    </template>
  </Child>
</template>

// 이렇게 템플릿태그 안에서 사용할 수도 있고
// 자식 컴포넌트를 직접 쓸 수도 있다.

<Child v-slot:default="props">
  <p>{{  props.msg  }}</p>
</Child>

// slot를 여러 개 쓸 때나 HTML이 많을 때 주로 <template>태그로 쓴다.

 

v-slot:default="props" 는 v-slot안으로 들어올 데이터를  props로 받는다는 것이고

default 일 땐 축약 가능

<Child v-slot="props">

 

 

 

 

● v-slot 이 좋은 이유

<foo>
  <bar slot-scope="fooProps">
    <baz slot-scope="barProps">
      <qux>{{ barProps.value }} - {{ fooProps.msg }}</qux>
    </baz>
  </bar>
</foo>

 

이런 코드가 있다고 했을 때

bar 컴포넌트에서 fooProps 를 가져오고, baz컴포넌트에서 barProps를 가져온다는 거고..

헷갈릴 수 있다고 한다.

 

아 진짜 설명을 진짜 .헷갈리게 적어놔서 한~참을 읽었네 ..

그러니까 예를 들면 컴포넌트에 slot이 딱 한 개만 있을 땐 상관없는데

여러 개 있을 때는. 뭐가 어느 slot인지 헷갈릴 수 있다보니까.^^

 

<Child>
  <template slot="header" slot-scope="props">
    <p>헤더: {{ props.title }}</p>
  </template>

  <template slot="footer" slot-scope="props">
    <p>푸터: {{ props.text }}</p>
  </template>
</Child>

↓

<Child>
  <template v-slot:header ="props">
    <p>헤더: {{ props.title }}</p>
  </template>

  <template v-slot:footer = "props">
    <p>푸터: {{ props.text }}</p>
  </template>
</Child>

 

이렇게 ~ 그냥~  어느 slot인지랑 뭘로 받을 건지랑 나눠서 쓰던 것을

합쳐서 쓰게 했다는 이야기를 아주 장황하게 해놨네요..............

 

자식컴포넌트에서 slot에 이름을 줍니다.

이름을 주지 않으면 defaule가 된다.

만약 이름 주지 않고 slot이 여러 개 있다면 첫 번째 slot만 처리한다.

<slot name="header"></slot>
<slot name="footer" :text="'footer입니다'"></slot>

 

 

기존 Vue2 방식에서 Vue3로 변하면서 생긴 차이

<!-- scoped slot -->
<template slot="슬롯이름" slot-scope="props">

<!-- v-slot -->
<template v-slot:슬롯이름="props">