개발 도구 (Development Tools)/Vue

Vue - 부모 컴포넌트가 자식 컴포넌트의 함수를 호출하는 방법

BiCute 2023. 1. 23. 08:00
반응형

 

부모 컴포넌트에 추가된 자식 컴포넌트의 함수를 부모 컴포넌트 측에서 직접 호출하는 방법입니다.

 

 

#1. 사용할 함수 정의

자식 컴포넌트에서 호출할 함수를 methods에 정의합니다.

// 자식 컴포넌트
export default {
  methods: {
    childFunction() {
      // 실행할 코드 작성
    }
  }
}

 

 

#2. ref 속성 추가

상위 컴포넌트에서 하위 컴포넌트에 ref속성을 사용하여 하위 컴포넌트에 대한 참조를 추가합니다..

// 부모 컴포넌트
<template>
  <child-component ref="child"></child-component>
</template>

 

 

#3. 함수 호출

부모 컴포넌트의 메서드에서 ref 및 함수 이름을 사용하여 자식 컴포넌트의 함수를 호출할 수 있습니다

// 부모 컴포넌트
export default {
  methods: {
    parentFunction() {
      this.$refs.child.childFunction()
    }
  }
}

 

※ 이 접근 방식은 자식 컴포넌트가 부모 컴포턴트의 직계 자손인 경우에만 작동합니다.

서로 멀리 떨어져있거나 더욱 깊게 중첩되어 있는 경우, store등 다른 접근 방식을 사용하는것이 좋습니다.

반응형