[VueJS] 부모, 자식 간의 메소드 사용/접근하기 (ft. $parent, $refs, Inline Templates)

vueJS에서 여러 component를 자식으로 두고 페이지를 구성할 때 공통으로 사용하는걸 상위 컴포넌트에 두고, 하위 컴포넌트에서 이를 사용하게 되는 방식으로 구현을 하게 되는데,

이때 상위 컴포넌트와 하위 컴포넌트 간의 메서드에 접근하는 방법에 대해 알아보자.

 

예제는 inline-template을 기반으로 하였으며 이 template 사용법은 3.x 버전부터는 사용이 중지된것으로 알고있다.

---

▷ 예제1) inline-tempate example

<div id='it_list'>
     <mine-it inline-template ref='mint'>
        <ul>
          <li>mine</li>
          <li>it</li>
          <li>record</li>
          <button v-on:click="goParnet()">VueJS</button>
        </ul>
    </mine-it>
</div>

Vue.component('mine-it', {
  data() { 
    return { 
      test : 'hi'
    } 
  },
  methods: { 
    goParnet : function(){ 
     this.$parent.goChild();
    },
    hiParent : function() {
       alert(this.test); 
    }
  } 
});
  
  new Vue({
      el: '#it_list',
      data: {
      },
      methods: {
        goChild : function() {
          this.$refs.mint.hiParent();
        }
      }
  });

 

코드를 보면 알겠지만

this.$parent 와 this.$refs 가 사용되었는데

this.$parent는 말그대로 부모 즉, 상위 컴포넌트에 접근하는 방법이며

 

this.$refs는 자식 즉, 하위 컴포넌트에 접근하는 방법인데

inline-template 옆에 ref라고 명시해둔 것이 보일것이다. 그게 자식 component 각각의 고유이름이다.

($refs를 사용하지 않고 하위 컴포넌트에 접근할때 children을 사용해서 접근하는 방법도있다.)

 

이처럼 $parent와 $refs를 사용하여 부모/자식간 메소드에 접근이 가능하다.