slot

modal을 공통으로 사용하기 위해 가져왔다.

여기에서 slot을 이용하게 되는데

 

 

Modal.vue

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

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

                <div class="modal-footer">
                <slot name="footer">
                    default footer
                    <button class="modal-default-button" @click="$emit('close')">
                    OK
                    </button>
                </slot>
                </div>

 

Modal.vue 내부에는 이렇게 3개의 slot 태그가 있다.

 

값을 overwrite해서 사용할 수 있다.

 

        <Modal v-if="showModal" @close="showModal = false">
        
            <!--
        you can use custom content here to overwrite
        default content
        -->
        <template v-slot:header>
            경고
        </template>
        </Modal>

해당 모달을 컴포넌트로 불러 올때에 <template v-slot:slot이름> 순으로 작성해서 가져오면

해당 헤더슬롯 부분이 경고로 변경된다.