[vue] Modal 만들면서 배운 점들
1. update modelValue
modal component에서 overlay 클릭 시, 다른 창에는 영향을 주지 않으면서 dialog를 닫을 수 있어야 한다. vue는 양방향 데이터 바인딩이 이루어 진다고 알고 있다. 부모에서 자식으로 전달할 때는 props, 자식에서 부모로 전달할 때는 emit으로 전달한다.
Modal이라는 하위 컴포넌트가 있고, 상위 컴포넌트 코드를 보면 아래와 같다.
// 상위 컴포넌트
<template>
<button @click="handleModalOn" @keyup="handleModalOn">
Open Modal TADA!
</button>
// Modal component에 props로 isModalOn의 데이터를 전달
<Modal v-model="isModalOn"></Modal>
</template>
<script lang="ts" setup>
import Modal from ...
import { ref } from 'vue'
const isModalOn = ref(false)
const handleModalOn = () => {
isModalOn.value = true
}
</script>
update:modelValue에서 v-model 사용법에 대해 자세히 알 수 있었다.
커스텀 컴포넌트의 v-model은 modelValue prop를 전달하고 update:modelValue 이벤트를 emit 하는 것과 같습니다.
// 하위 컴포넌트
// 현재 모달의 상태를 상위 컴포넌트로 전달하여 하나의 데이터로 통신해야함
<template>
// 상위컴포넌트의 isModalOn을 v-model로 전달받았고, v-model을 통해서 이벤트를 emit할 수 있음
<div v-if="modelValue" @click.self="handleClosePopup" @keyup.self="handleClosePopup">
<button @click="handleClosePopup" @keyup="handleClosePopup">
닫기 버튼
</button>
// ... modal 관련 코드 생략
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
defineProps<{
modelValue: boolean
}>()
const emit = defineEmits(['update:modelValue'])
const handleClosePopup = () => {
emit('update:modelValue')
}
</script>
2. @click.self
https://kr.vuejs.org/v2/guide/events.html
click 이벤트가 해당요소에서만 적용되는 method.
modal 바깥쪽 영역을 클릭했을 때 창을 닫히게 하기 위해 사용했다. 그냥 click 이벤트를 사용하면 modal component 전체 영역 아무데나 클릭했을 때 창이 닫히게 되므로 overlay 부분만 이벤트에 해당하게 하는 메서드였다. 유용!
Author And Source
이 문제에 관하여([vue] Modal 만들면서 배운 점들), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@soor/vue-modal을-만들면서-배운-점들저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)