[Vue] 자식 컴포넌트 데이터 가져오기(ref)

보통 부모-자식 컴포넌트 간에 통신에는 props와 $emit을 이용합니다.

 

하지만 아래 코드에서는 ref를 사용하여 자식컴포넌트의 데이터를 가져왔는데

동적으로 자식 컴포는트가 교체되는 모달에서 공통으로 필요한 기능인 getData 버튼을 부모 컴포넌트에 위치시켰기 때문입니다.

부모에서 $emit -> 자식에서 $emit -> getData 이런식으로 해도 될 것 같긴한데 코드가 어지러워서 ref를 이용하는 방식을 사용해봤습니다.

<template>
  <div>
    <component :is="loadComponent" ref="childComp" @modal-command="receiveCallback"></component>
    <button @click="getData">Get Data from QueryLst</button>
  </div>
</template>

<script>
import QueryLst from './QueryLst.vue';

export default {
  name: 'ConfigPopup',
  props: {
    compName: {
      type: String,
      required: true
    }
  },
  computed: {
    loadComponent() {
    	return defineAsyncComponent(() => import(`@/path/${this.compName}.vue`));
  	},
  methods: {
    getData() {
      // 자식 컴포넌트의 인스턴스에 접근
      const childCompInstance = this.$refs.childComp;

      // 자식 컴포넌트의 data 속성에 접근하여 데이터 가져오기
      const childCompData = compInstance.data;

      // 가져온 데이터 사용하기
      console.log(childCompData);
    }
  }
};
</script>

위의 예시에서 자식컴포넌트의 인스턴스에 접근하기 위해 this.$refs.childComp를 사용하고, 이를 통해 자식 컴포넌트의 data 속성에 접근하여 데이터를 가져오고 있습니다.

 

다만, ref를 사용하여 자식 컴포넌트의 인스턴스에 접근하는 것은 Vue.js의 공식 문서에서 권장되는 방식이지만, 최대한 사용을 피하는 것이 좋은 Vue.js 개발 관행 중 하나입니다. 

 

최상위 루트 컴포넌트에서 데이터나 이벤트를 전달하는 props와 $emit을 이용하여 부모-자식 컴포넌트 간의 통신을 할 수 있습니다. 이를 이용하면 컴포넌트 간의 결합도를 낮출 수 있으며, 재사용성과 유지보수성을 높일 수 있습니다.

 

반면 $parent나 $refs와 같은 접근 방식은 컴포넌트 간의 결합도를 높이기 때문에 권장되지 않습니다. 예를 들어 부모 컴포넌트가 자식 컴포넌트의 내부 구조를 알고 있다는 가정하에 코드를 작성하면, 부모 컴포넌트와 자식 컴포넌트 간의 결합도가 높아지고 재사용성과 유지보수성이 떨어집니다.