[Vue] 부모-자식 컴포넌트간 데이터 전달

 

 

 

Vue를 이용한 개발에서는  부모-자식 컴포넌트간 데이터 전달을 잘 하는것이 매우매우매우 중요합니다.

 

대표적으로 부모-자식 컴포넌트간 데이터 교환 방법에는 Props 속성을 이용한 방법이 있지만,

 

이번 포스팅에서는 더 간단한 방법인 this.$parent와 this.$refs에 대해서 알아보도록 하겠습니다.

 

 

▶html

<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>

 

▶javascript

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는 부모 컴포넌트에서 자식 컴포넌트로 접근하는 방법입니다. 또한, inline-template 옆에 ref라고 명시해둔 것은 자식 컴포넌트 각각의 고유이름입니다.

 

이처럼 $parent와 $refs를 사용하여 부모-자식간에 접근이 가능합니다.