[Vue.js] $refs를 사용할 때 undefined 에러

 

 

에러

부모 컴포넌트에서 자식 컴포넌트의 메소드를 호출할 때 생긴 에러이다.

1. this.$refs.childRefValue.methodName()을 찍었을 때 undefined

2. this.$refs.childRefValue를 찍었을 때 undefined

 

 

 

 

 

원인

이 문제는 항상 DOM이 다 생성되지 않았을 시점에 메소드나 데이터를 호출할 때의 문제였고 나는 해당되는게 없었다.

고 생각했는데 if~else 조건문에서 else에 있는 자식 컴포넌트의 메소드를 호출하고 있었다.

반대의 조건문에 있는건 아예 타지않기때문에 컴포넌트 자체가 dom에 존재하지 않았다.... 

 

 

 

 

 

해결

여러가지 찾아보다가 $refs를 사용하지 않고 props를 사용했다.

 

부모에서 props로 데이터 전달 => 자식 컴포넌트에서 data()에 해당 값을 기본값으로 초기화

=> 자식 컴포넌트에서 watch를 사용하여 해당 값이 바뀌면 메소드를 동작시키도록 했다.

 

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.