[Vue3] SFC에서의 props, emit

 

 이번 포스팅에서는 Vue3에서 <script setup> 형태 컴포넌트(Component)의 props와 emit 사용법에 대해서 다룹니다.

Vue 공식문서의 Vue SFC Playground 환경에서 실습된 예제입니다. (예제 링크)

1. 부모(Parent) Component 에서 하위 Component로의 props 인자 전달

2. 하위 Component 에서 전달받은 props를 출력

3. 버튼 클릭 이벤트에 맞춰 입력받은 props 데이터를 emit 수행

4. 상위(부모) 컴포넌트는 전달받은 emit 데이터로 갱신
    (예제는 입력값에 접두어 'emit_{입력값}'으로 출력되도록 함.)

1. 상위(부모) 컴포넌트 (App.vue)

• "msg' : 하위 컴포넌트(Comp)의 props로 전달될 상위 컴포넌트의 입력 변수 (반응형)
• ":data": props 전달 명칭
• "@update:data" : emit 구분명 (emitText 값에 emit으로 발생한 value값 할당)

<template>
  <h1>Test Props & Emit</h1>
  <br/>
  <div style="background-color:azure;">
    <h3>Parent</h3>
    <input 
      class="content"
      placeholder="Input Text ..."
      v-model="msg"  
    >
    <div class="content"> Emit Result : {{ emitText }}</div>
  </div>
  <Comp 
    :data=msg 
    @update:data="emitText=$event"
  >
  </Comp>        
  
</template>

<script setup>

import Comp from './Comp.vue';
import { ref } from 'vue';

const msg = ref('');
const emitText = ref('');

</script>

<style scoped>
.content{
  margin-bottom: 10px;
}
</style>

2. 하위 컴포넌트 (Comp.vue)

• defineProps를 통해 상위 컴포넌트의 props 정의
• defineEmits를 통해 상위 컴포넌트로의 emit 정의
• "{{ props.data }}" : 전달받은 props 정보를 출력
• emit 실행 : " emit('{정의된 emit 명칭}', {전달 값}); "

<template>
    <div style="width:100%; background-color: antiquewhite;">        
        <h3>Component</h3>        
        <div>props : {{ props.data }}</div>                
        <button class="content" @click="ButtonClickEvent">emit</button>
    </div>
</template>

<script setup>  
const props = defineProps({
    data: { type : String }
});
const emit = defineEmits(['update:data']);

const ButtonClickEvent = (event) => {    
    emit('update:data', `emit_${props.data}`);
}

</script>

<style scoped>
.content{
    margin-top: 10px;
}
</style>