모달 컴포넌트 transition 속성 이슈 - Vue 2.X와 Vue3.X
모달에 트랜지션 속성을 넣는 과정에서 Vue 버전차이로 인해 이슈가 발생했다.
1. 을 모달 컴포넌트 안에 선언하고 싶은데?
<transition name="modal">
<modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<template v-slot:header>
<h3>custom header</h3>
</template>
</modal>
</transition>위의 코드처럼 작성하면 modal의 애니메이션을 담당하는
2. Vue 2.x 공식문서 예시
<!-- modal component -->
<template>
<transition>
<div class="modal"><slot/></div>
</transition>
</template><!-- usage -->
<modal v-if="showModal">hello</modal>Vue2.x 공식문서대로 모달안에 트랜지션이 들어간 코드를 설정해도 원하는 결과가 나오지 않았다.
그리고 Vue2.x 에서는 모달 컴포넌트를 쓰는 루트 컴포넌트에서 v-if 속성을 사용하여 트랜지션을 작동시켰다.
하지만
3. Vue 3.x migration strategy
<!-- modal component -->
<template>
<transition>
<div v-if="show" class="modal"><slot/></div>
</transition>
</template>
<script>
export default {
props: ['show']
}
</script><!-- usage -->
<modal :show="showModal">hello</modal>이는 prop을 하위 컴포넌트에 전달하여 트랜지션 하위 엘리먼트를 on/off하는 것으로 통제한다.