[Vuejs] 호출한 컴포넌트의 function 사용하기 ($refs X)

 

A라는 파일에서 B라는 공통 컴포넌트를 호출하여 사용하고 있다.

B에서 사용하고 있는 getData 라는 function를 A에서 사용하려고 한다.

우선 어려움이 있었던 이유는, B 컴포넌트의 ref명이 단순 스트링 값이 아닌 탭의 index에 따라 달리 매겨진다.

뭐 이런 식으로 .. ?

 

<B>
 :ref="(el) => {idx==0?getGridDataRef0=el:(idx==1?getGridDataRef1=el:getGridDataRef2=el)}"
</B>

 

예를 들어, A에서 getCallFun 이라는 function에서 B의 저 getData를 호출한다고 해보자

ref를 명명해주었으므로, this.$refs.컴포넌트명(여기서는B).컴포넌트의메소드(여기서는getData) 이런 식으로 호출을 하면 된다. this.$refs.B.getData(param);

근데 자꾸 $refs를 못 찾는다. 오늘 이 에러를 정말 몇 십 번 정도 본 것 같다 ^^ 

 

typeerror: cannot read properties of undefined (reading '$refs')

 

vue3에서는 setup을 사용하므로, $refs로 컴포넌트를 가져올 수 없다.

setup에 ref를 먼저 선언해주고, 그 변수 값을 이용하여 B컴포넌트의 데이터나 함수 등을 끌고와야한다.

함수의 경우에는 컴포넌트명.value.함수명(); 이고, 일반 state 데이터의 경우에는 컴포넌트명.value.변수명; 이다.

예를 들면 이런 식이다.

 

 export default {
  name: 'A',
  components: { B, autoSearchText },
  setup() {
  	const getGridDataRef0 = ref(null);
  	const getGridDataRef1 = ref(null);
   	const getGridDataRef2 = ref(null);
 }
 
 .
 .
 .
 
 const searchAutoCompleteData = async () => {
   let refNm = eval('getGridDataRef'+state.tabIdx);
   state.searchData = refNm.value.getData(autoSearchText.value.input); 
   state.searchTitle = refNm.value.title;
 }

 

🚩 주의

- 저 B에서 사용하는 getData는 꼭 B에서 return값으로 정의되어야 찾을 수 있다.

- refs 속성은 컴포넌트가 랜더링 완료된 후에 접근이 가능하다.

그렇기 때문에 create hook 에서는 undefined가 되며, onBeforeMount, 혹은 onMounted 주기에 들어와야 값이 정상적으로 들어온다.

 

📃 참고

B 컴포넌트를 콘솔에 찍어보면 아래와 같이 나온다.

 

---

📒 상위 컴포넌트에서 하위 컴포넌트 function 호출 시, ref보다는 emit을 권고하므로 특이한 경우가 아니라면 emit을 사용하자.