Vue 3.0+ Emit grandChild(손자)에서 사용법

Vue를 재작년에 접한 뒤, 틈틈이 개인적으로 혹은 프로젝트를 접하면서 공부하고 있었는데..

블로그에 정리한다고 하고 매일 귀찮아서 이제서야 글을 남긴다. 

 

Vue 2.0 버전을 사용하다가 Vue3.0을 사용하게 되었는데, 

 

기존 방식이 Optional Api 방식이였다면, 

지금은 Compositon Api 방식으로 사용하고 있다. 

 

개인적으로는 Optional Api 방식을 사용하는 것을 좋아하는데, 

현 프로젝트 상으론 Composition 방식을 사용하고 있어서 어쩔 수 없이 다시금 공부하는 게 생기기도 하는 것 같다. 

 

Optional Api와 Composion Api 방식의 차이점은 아래 Docs에서 내용 참고하길 바란다. 

https://ko.vuejs.org/guide/extras/composition-api-faq

Vue.js

 

 

 

이번에 emit 방식에 대해 공부하고 있었는 중인데, 

항상 예시로는 많이들 Child - Parent 구조만 나오고 있고,

GrandChild - Child - Parent 이런 구조에 대한 쓰임새는 나타나지 않은 것 같아서 그냥 막무가내로 예시를 적는다. 

 

 

// Parent (SFC)
<template>
 <Child @tempMethod='tempMethod' />
</template>

<script setup>
const tempMethod = () => {
 console.log('temp Method');
}
</script>

// Child (SFC)
<template>
 <GrandChild @tempMethod='emitMethod()' /> 
</template>

<script setup>
const emit = defineEmits([
 'tempMethod'
]);

const emitMethod = () => {
 emit('tempMethod')
}
</script>


// GrandChild (SFC)
<template>
 <div> GrandChild </div>
 <button @click=grandChildClick()></button>
</template>

<script setup>
const emit = defineEmits([
 'tempMethod'
]);

const grandChildClick = () => {
 emit('tempMethod');
}
</script>

 

 

예시로 만든 소스코드여서 그대로 사용하면 오류가 발생할 수 있다. 

 

이런 식으로 돌아간다는 점을 보여준 것이고, 자세한 내용은 디버깅해보면 좋을 듯 하다.

 

 

위 방식보단 pinia에서 호출하는 것도 깔끔할 것 같다는 생각이 든다..