[VueJS] Vue3 CompositionAPI로 자식 컴포넌트 접근

vue3 공부 중 template refs를 보다 보니 vue2 컴포넌트에서 자식 컴포넌트 안의 methods를 실행시키는 걸 사용했던 게 생각나서 vue3의 compositon API에서는 어떻게 하는지 궁금해서 찾아봤었다.

테스트는 vite+vue3에 디자인프레임워크로 퀘이사를 사용했습니다.

---

vue2에서 사용하던 optionsAPI 방식에서는 this.$refs.ref이름 형식으로 자식 컴포넌트에 접근이 가능했다.

vue3에서 제공하는 compositionAPI 방식은 this를 사용할 수 없고, 컴포넌트에 입력된 ref와 이름이 같은 변수를 만들고 ref(null)을 주면 된다.  간단하게 보면 아래와 같다.

<chld-component ref="child"/>
...
//vue2 optionsAPI 의 접근 방법
this.$refs.child.~~

//vue3 compositionAPI 의 접근 방법
const child = ref(null);
child.value.~~

 

vue2 optionsAPI의 예시를 조금 더 보면 이렇다.

<template>
	<child-component ref="child"/>
</template>
<script>
export default {
    mounted() {
    	this.$refs.child.dataA; //자식 컴포넌트 데이터 가져오기
    	this.$refs.child.methodA(); //자식 컴포넌트 함수 실행
    }
}
</sciprt>

 

이제 vue3 composition API에서 접근하는 방법.

먼저 테스트해본 부모 컴포넌트 소스는 이렇다.

<template>
  <div>
    <div ref="root">This is a root element</div>
    <br>
    <refsTest ref="childComponent"/>
    <q-btn label="자식 컴포넌트 함수 실행하기" @click="runChildFunction()"/>
  </div>
</template>

<script>
import refsTest from './refs-test.vue';
import { ref, onMounted } from 'vue';
export default {
  setup() {
    const root = ref(null);
    // console.log(root);
    
    const childComponent = ref(null);
    onMounted(() => {
      //DOM 요소는 초기 렌더링 후에 ref에 할당한다.
      console.log(childComponent);
      
      console.log('자식컴포넌트 데이터 가져오기 a : ', childComponent.value.a);
      console.log('자식컴포넌트 데이터 가져오기 b : ', childComponent.value.b);
      console.log('자식컴포넌트 데이터 가져오기 c : ', childComponent.value.c);

    })
    const runChildFunction = () => {
      console.log('runChildFunction');
      childComponent.value.isRun({sendValue: 'sendValue!!'});
    }
    
    return { 
      root,
      childComponent,
      runChildFunction
    }
  },
  components: {
    refsTest
  }
}
</script>

<style>

</style>

onMounted를 통해서 자식 컴포넌트에 선언된 데이터를 읽고 console.log에 찍어준다.

그리고 버튼을 누르면 자식 컴포넌트에 있는 함수를 실행 및 데이터를 넘겨주는 소스이다.

 

자식 컴포넌트 소스는 이렇다.

<template lang="">
  <div>
    Is run now...{{run}}
  </div>
</template>
<script>
import { ref , toRefs} from 'vue';
export default {
  setup() {
    let run = ref(false);
    let a = ref('aaaa');
    let b = ref('bbbb');
    let c = ref(1234);
    const isRun = (v) => {
      console.log('isRun');
      console.log('부모 컴포넌트에게 받은 값: ', v);
      run = ref(true);
    }
    console.log('run : ' , run);
    return {
      run, 
      a,
      b,
      c,
      isRun,
    }
  }
}
</script>

이런 식으로 부모 컴포넌트에서 자식 컴포넌트로 접근할 수 있다.

결과 이미지

그리고... 하면서 버튼을 누르면 run 값을 바꿔 화면에 뿌려주려고 했는데 이건 아직 안된다... 이 부분은 아직 이해를 못 한 것 같다.