Vue slot , scoped slot

#slot 

슬롯을 사용하면 등록한 컴포넌트에서 재정의가 가능 (컴포넌트 안에서 ui부분을 재사용하기 위해서 조각낸 부분이라고 이해하면 쉬움) = 컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능

대표적인 예로 모달이나 버튼 등에 사용된다.

1.정의하기 - 버튼이나 모달 뭐든 좋다.(기본레이아웃 이라고 생각하고 만들면 편하다.)

<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <slot name="modal-button">
                        <button
                            class="modal-default-button"
                            @click="$emit('close')"
                        >
                           <i class="fas far fa-times"></i>
                        </button>
                    </slot>
                    <div class="modal-header">
                        <slot name="header"> default header </slot>
                        <!-- slot = 특정컴포넌트의 ui를 재사용할 수 있다 -->
                    </div>

                    <div class="modal-body">
                        <slot name="body"> default body </slot>
                    </div>

                    <div class="modal-footer">
                        <slot name="footer"> default footer </slot>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

// slot name="body 하고 등록한 후 그안에 들어가는 내용은 디폴트내용이 된다.

 

2.사용하기 

<modal v-if="showModal" @close="showModal = false">
    <template #header>
        <!--slot을 불러올때 v-slot:header 또는 #slot네임으로 사용가능-->
        <h3>경고!</h3>
        <!-- slot을 사용하면 등록한 컴포넌트에서 재정의가 가능하다! 재사용성이 매우 좋군!-->
    </template>
    <template #body>
        <p>할일을 입력 해 주세요</p>
    </template>
    <template #footer>
        by.Sunny
    </template>
</modal>

이것을 필요한 부분에 불러와서 import하여 사용한다
그 안에 들어가는 내용은 본인이 작업하는 ui에 맞게 변경가능하다(태그도, 텍스트, 이미지 무엇이든지 가능). 위의 코드참조

안쓰게 되면 최초 등록한 디폴트 내용이 나오게 된다.(최초등록시 slot 안에 내용을 비워둘수 있다.)

https://vuejs.org/examples/#modal

반응형

#Scoped slot

슬롯을 배우다가 좀더 자세히 공부하고 싶어서 문서를 보았더니 스콥드 슬롯이라는 것을 알게 되었다

템플릿만 재사용을 하는게 아닌 데이터의 재사용을 이용하기 위해 스콥드 슬롯을 사용한다.

 

1.하위에서 슬롯안에 (:)를 이용하여 데이터를 연결

<!-- 하위 컴포넌트의 슬롯 태그 -->
<slot :상위 컴포넌트로 전달할 속성 이름="하위 컴포넌트의 데이터"></slot>

 

2.상위에서 받기

<!-- 상위 컴포넌트에 등록된 하위 컴포넌트 태그 부분 -->
<child-component>
  <template #네임명="임의의 변수">
    {{ 임의의 변수.상위 컴포넌트로 전달할 속성 이름 }}
  </template>
</child-component>

 

template는 slot을 감싸주는 껍데기로 생각하면 쉽다.

단일 slot일 경우 태그를 이용하여 바로 작업할 수 있지만 여러개가 있을경우 template로 반드시 깜사줘야 한다.

스콥드 스롯의 표현방식인 slot-scope는 vue 3.0 이하에서만 쓰이고

현재는 v-slot 또는 #으로 표현한다

v-slot은 슬롯에 name 속성을 지정하여 여러 개 사용할 수 있도록 하는 네임드슬롯과 스콥드 슬롯을 한 번에 표현할 수 있습니다.

결론적으로  slot를 정희하고 상위컴포넌트에서 template로 감싼 후  v-slot 또는 #으로 정의 한후 사용 하면 된다.

 

👀도움받은곳

https://joshua1988.github.io/vue-camp/reuse/slots.html#%E1%84%89%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A9%E1%86%BA-%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3-%E1%84%92%E1%85%A7%E1%86%BC%E1%84%89%E1%85%B5%E1%86%A8