자식 component의 method에 접근하기 ( $refs is not a function vue 에러 해결 )

jihye_son·2022년 10월 25일
0

Vue.js

목록 보기
20/24

회사 업무 중에 자식 컴포넌트의 메소드를 사용해야하는 일이 생겼다

그래서 나는 당연히

<자식 컴포넌트 
	ref="child"/>
메소드(){
	this.$refs.child.자식메소드();
}

이렇게 구현했는데

자꾸만

에러

$refs.child.자식메소드() is not a function vue

이라고 뜨는 것 아니겠는가.....!!!!?!

구글링해서 알아보니까

$ref로 가져온 자식 컴포넌트는 배열 형태이기 때문에
index 를 지정해줘야 된다고 한다

해결

    메소드() {
      this.$refs.child[0].자식메소드()
    }

이렇게 [0] 라고 인덱스를 지정해주니 잘 작동되었다!

profile
뽀짝뽀짝 나는야 FE 개발자

1개의 댓글

comment-user-thumbnail
2023년 5월 23일

감사합니다,...

답글 달기