Vue.js - 컴포넌트 ↔ 컴포넌트 데이터 전송 (props, emit)

props

• 상위 컴포넌트의 데이터를 하위 컴포넌트로 전달

<!-- 상위 컴포넌트 -->
<template>
  <component_name data_name="data_value"/>
</template>


<!-- 하위 컴포넌트 -->
<script>
export default {
  name: 'component_name',
  props: {
    data_name: String // 받아오는 데이터 타입
  },
  setup(props) {
    console.log(props.data_name);  // 출력 값: data_value
  }
}
</script>

 

emit

• 다른 컴포넌트에게 이벤트를 전달하기 위해 사용할 수 있다. (하위 컴포넌트 → 상위 컴포넌트 데이터 전달)
• Composition API: context.emit(event_name, data_value)
• Vue 2: this.$emit(event_name, data_value)

<!-- 상위 컴포넌트 -->
<template>
  <component_name @event_name="event_function"/>
</template>
<script>
export default {
  setup() {
    const event_function = (data_value) => {
     console.log(data_value);  // 출력 값: data_value
    }
    
  }
}
</script>


<!-- 하위 컴포넌트 -->
<script>
export default {
  name: 'component_name',
  setup(props, context) {
    context.emit('event_name', 'data_value');  // 상위 컴포넌트로 데이터 보내기
  }
}
</script>

 

번외

• props 값이 바뀌면 함수 실행

<!-- 상위 컴포넌트 -->
<template>
  <component_name data_name="data_value"/>
</template>


<!-- 하위 컴포넌트 -->
<script>
import { watch } from '@vue/runtime-core'

export default {
  name: 'component_name',
  props: {
    data_name: String // 받아오는 데이터 타입
  },
  setup(props) {
    watch(() => props.data_name, (change_data, previous_data) => { 
      console.log(change_data); // 바뀐 데이터
      console.log(previous_data); // 바뀌기 전 데이터
    });
  }
}
</script>

 

참고 링크 1: https://v3.ko.vuejs.org/guide/component-props.html

Props | Vue.js

참고 링크 2: https://velog.io/@unani92/Vue-JS-props-emit-%EC%97%B0%EC%8A%B5%ED%95%98%EA%B8%B0-%EC%9C%A0%ED%88%AC%EB%B8%8C-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-c735g7jn

[Vue JS] props, emit 연습하기 - 유투브 클론코딩