[Vue3, Vuetify3, Typescript] Composition API를 사용하여 $refs를 통해 DOM 접근하기(ref 사용법)

구현하려는 것

 

Login.vue(부모 컴포넌트) 페이지에서 "아이디 찾기" 버튼 클릭 시

DialogFindEmail.vue(자식 컴포넌트) 팝업(Dialog)이 열리고 닫히게 만들고 싶었다.

 

자식 컴포넌트에서 Dialog를 띄웠다, 내렸다하는 함수를 작성하고,

부모 컴포넌트에서는 ref를 통해 자식 컴포넌트의 함수에 접근하려고 한다.

 

Vue2에서는 this를 통해 $refs에 접근할 수 있었는데,

Vue3에서는 this가 없기 때문에 Composition API에서 ref 사용법을 찾아보다가

정리하는 글~~~

 

 

 

Vue3 Composition API 에서 사용하기

 

 

가독성을 위해 불필요한 코드는 제거했습니다!

 

 

DialogFindEmail.vue(자식 컴포넌트)를 먼저 살펴보자

 

 

[templete]

v-dialog 태그에 v-model을 통해 popup 변수를 바인딩해주었다.

Close Dialog 버튼 클릭 시 popup을 false로 바꿔 Dialog가 닫히도록 해주었다.

 

 

[script setup]

toggle 함수를 통해 popup 값을 true,false로 토글되도록 해주었다.

defineExpose를 통해 toggle 함수를 export 해주었다.

 

Vue3에서 defineExpose는 부모 컴포넌트가 자식 컴포넌트에 접근할 수 있도록 하는 함수이다.

defineExpose를 통해 자식 컴포넌트는 부모 컴포넌트에서 접근할 수 있도록 허용하거나 막을 수 있다.

// DialogFindEmail.vue (자식 컴포넌트)

<template>
  <v-dialog v-model="popup">
    <v-card>
      <v-card-title> 아이디 찾기 </v-card-title>
      <v-card-text>
        아이디 찾기 팝업입니다.
      </v-card-text>
      <v-btn @click="popup = false">Close Dialog</v-btn>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

let popup = ref(true);

const toggle = () => {
  popup.value = !popup.value;
};

// defineExpose를 통해 부모 컴포넌트가 자식 컴포넌트의 API에 직접적으로 접근할 수 있도록 한다!
defineExpose({
  toggle,
});
</script>

<style lang="scss" scoped>
</style>

 

 

 

다음으로 Login.vue(부모 컴포넌트)를 살펴보자

 

[templete]

아이디 찾기 버튼 클릭 시 openEmailDialog 함수를 실행한다.

DialogFindEmail(자식 컴포넌트)를 불러오고 ref 속성에 "dlg_fing_email" 이름을 붙여준다.

 

 

[script setup]

설명은 주석으로 달았습니다. 번호순서대로 보시면 편할 것 같아요!

// Login.vue (부모 컴포넌트)

<template>
  <div>
    <div class="link_list">
      <v-btn>회원가입</v-btn>
      <v-btn @click="openEmailDailog" > // 아이디 찾기 클릭시 openEmailDailog 실행
      아이디찾기
      </v-btn>
      <v-btn>비밀번호찾기</v-btn>
    </div>
    <DialogFindEmail ref="dlg_find_email" /> // 자식 컴포넌트
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue';
import DialogFindEmail from '@/components/dialog/DialogFindEmail.vue'; // 자식 컴포넌트 import

// 1. 자식 컴포넌트 ref의 초기값을 null로 지정 (템플릿에서 사용된 ref의 변수명 그대로 지정해줘야함)
const dlg_find_email: Ref<HTMLElement | null> = ref(null);

let refFindEmail: any; 

const openEmailDailog = () => {
  // 3. 자식컴포넌트에 정의된 toggle함수 접근해서 Dialog를 띄어준다!
  refFindEmail.toggle();
};


onMounted(() => {
  // 2. 반응성 ref와 같이 value 속성을 통해 접근하고 객체 정보를 refFindEmail에 저장
  // DOM에 대한 접근이므로 반드시 Mount 되었을 때 접근해야함. onMounted 내에 작성해주자!! 
  refFindEmail = dlg_find_email.value;
});
</script>

<style>
@import '@/styles/login/login.scss';
</style>

 

 

 

 

 

 

---

뭐 하나 적용할때마다 폭풍 검색해서 배우는것도 많고

시간도 많이 걸리는중이다,,ㅎㅎㅎ

 

---

2024.03.25 추가

 

DOM에 접근할 때

const root = ref<HTMLElement | null>(
  document.getElementById('send-ad-event-customer'),
);

 

 

컴포넌트에 접근할 때

const dlg_coupon = ref<InstanceType<typeof DialogCoupon> | null>(null);