[vue] emit을 이용한 페이지 전환

Login 페이지에서 메인 페이지로 전환 하는 방법을 찿던중 emit기능을 알게 되었습니다.

상위 컴포넌트와 통신하는 방법으로 사용하는 기능으로 emit을 쓰더라구요.

간단한 예제로 알아봅시다.

 

<!-- EmitExam.vue -->
<script setup>	// for Composition Api 
import {RouterLink, RouterView} from 'vue-router'
import {ref} from 'vue'
import Before from './Before.vue';
import After from './After.vue';

let isBefore = ref(true);     // reactivity를 부여하기 위함. Optional Api의 data 기능에 해당
</script>

<template>
  <div>
  	<!-- Custom Component Event 생성 : change -->
    <Before v-if="isBefore" @changePage="isBefore = false"/>	
    <After v-else></After>
  </div>
</template>

<style scoped>
 
</style>

<script setup>이 무엇인지 몰라 찿아보니 아래와 같았습니다.

<script setup>

Composition API 사용을 위한 Syntatic Sugar

(기존 문법이 간단한 문법으로 표현될때 쓰는 용어, ex. Jquery, Async, Await)

 

<!-- Before.vue -->
<template>
  <div>
    <h1>This is Before</h1>
    <!-- 상위 컴포넌트에서 지정한 이벤트 실행 -->
    <button @click="$emit('changePage')">Go After</button>	
  </div>
</template>

<!-- After.vue -->
<template>
  <div>
    <h1>This is After</h1>
  </div>
</template>

순서

1. EmitExam에서 chagne Event를 Before.vue 컴포넌트에 정의

2. Before.vue에서 change Evnet 실행(emit)

3. EmitExam에 isBefore이 false로 바뀌면서 After.vue Rendering

 

결론

Vue는 컴포넌트를 합성하여 거대한 APP을 쉽게 만들수 있습니다.

그렇다보니 컴포넌트간 통신 및 재사용하는 방법은 꾸준히 알아가야 제대로 된 APP을 만들수 있을것 같습니다.

또 Optional Api와 Composition Api의 기본적인 부분은 숙지를 하고있으면 구글링시 유연하게 정보를 습득하는데 도움이 될것 같네요.