[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 부분만 이벤트에 해당하게 하는 메서드였다. 유용!