[Vue.js] 부모 컴포넌트에서 자식 컴포넌트의 메소드 실행시키기

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.

 

 자식 컴포넌트에서 부모 컴포넌트 메소드등을 실행시킬 때 $emit을 사용하지만, 반대의 경우는 refs를 사용한다. refs를 사용하는 방법은 다음과 같다.

 

부모 컴포넌트

<template>
  <div id="parent">
    <!-- 자식 컴포넌트에 ref="xxx"를 설정 -->
    <child ref="child_a" />
  </div>
</template>

<script >
  import child from './child';
  export default {
    components: {
      child,
    },
    methods: {
      callChildMethod() {
        // $refs.<ref_name>으로 액세스
        // (ref_name은 ref="xxx"에서 설정한 것)
        this.$refs.child_a.helloChild();
      },
    },
  }
</script>

 

자식 컴포넌트

<template>
  <div id="child">
    <!-- ... -->
  </div>
</template>

<script >
  export default {
    methods: {
      helloChild() {
        console.log('hello from child');
      },
    },
  }
</script>

 

정리

포인트는 다음과 같다.

• $refs를 사용
• ref="xxx"를 자식 컴포넌트에 설정
• this.$refs.xxx.some_method()로 자식 컴포넌트의 메소드를 호출

---

참고자료

https://r17n.page/2020/07/07/vue-call-child-component-method-from-parent/

https://proglearn.com/2021/03/12/vue-js%E3%81%A7%E8%A6%AA%E3%81%8B%E3%82%89%E5%AD%90%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E5%86%85%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E7%99%BA%E7%81%AB/