[vue] vue3 ref로 컴퍼넌트 접근하기 (define expose)

상황

나는 ref를 이용하여 부모 컴퍼넌트(A)에서 자식 컴퍼넌트(B)의 call함수를 호출하고 싶음

그런데 script setup 방식을 이용하고있을때 ref를 이용하여 자식컴퍼넌트에 접근하는 방법을 몰랐음

안 뒤에 정리한 내용임

 

1.

먼저 자식 컴퍼넌트에서 call함수를 아래와 같이defineExpose라는 vue 기본제공 메소드를 사용하여 명시함

(대충 이걸 배출할거다 라는 뜻)

 

2.

부모 컴퍼넌트는 자식 컴퍼넌트태그에 ref를 달아줌

ex) <B ref="b"/>

 

3.

컴퍼넌트내부에서 스크립트 최상단 스코프에 ref를이용하여

컴퍼넌트 객체를 미리 빈값으로 할당함

ex) const b = ref(null);

 

주의점

 - 변수명은 컴퍼넌트태그에 등록한 ref의 이름과 똑같아야 함 (위 예시에선 'b')

 - 컴퍼넌트내부의 스크립트중 최상단 스코프에 선언해야함

 

4.  

b.call()과 같이 사용하면 끝

---

parents로 자식컴퍼넌트에서 부모컴퍼넌트 접근하기

 

getCurrentInstance로 현재 컴퍼넌트(자식 컴퍼넌트)의 인스턴스를 구한 뒤,

해당 인스턴스의 parent 요소에 접근하면 됨.

<script setup>
import { onMounted, getCurrentInstance } from "vue";

onMounted(() => {
  const instance = getCurrentInstance();
  console.log(instance.parent);
});

</script setup>