vue3 modal

모달창이 떠있을 때 다른 컴포넌트를 누를 수 없음! ⇒ z-index: 100;

모달창이 필요한 상황이면 show를 ture로 하고 필요없으면 false로 바꾸는 방식으로 팝업을 진행

Teleport (vue3의 새로운 기능)

• 원하는 코드를 원하는 곳으로 이동

<!-- index.html -->
<div id="example"></div>

<!-- app.vue -->
<teleport to="#example">
    <div>Sohee Code</div>
  </teleport>

움직이고 싶은 코드를 <teleport> 로 감싸서 보낸다.

slot

• 필드와 태그가 포함된 정보를 보낼 때 사용!

<!-- TodoList.vue -->
<Modal>
	<template v-slot:title>
    DeleteTodo!!
  </template>
  <template v-slot:body>
    Are you sure you want delete this todo?
  </template>
  <template v-slot:footer>
    <button>hello</button>
  </template>
</Modal>

<!-- modal.vue -->
<slot name="title"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>

받는 부분은 slot 태그만 작성하면 컴포넌트 안에 값들이 모두 넘어가게 된다.

특정 부분에만 넣고싶으면 name을 작성하고 template v-slot: 이름 을 작성