LANGUAGE/Vue.js
[Vue 3] defineProps() 와 defineEmits() 비교하기
31daylee
2024. 3. 28. 10:59
728x90
📌들어가기 전
defineProps와 defineEmits와 같은 옵션을 선언하기 위해서는 <script setup> 내에서만 API 사용이 가능하다.
import 할 필요없이 <script setup>이 실행될 때 컴파일이 된다.
📌defineProps() 란?
- Vue 컴포넌트에서 사용되는 프로퍼티들을 명시적으로 정의하는 데 사용
- 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다.
<!-- Child Component -->
<template>
<div>
<p>{{ message }}</p>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
import { defineComponent, defineProps } from 'vue';
const ChildComponent = defineComponent({
props: defineProps({
message: String,
count: {
type: Number,
default: 0
}
}),
});
</script>
📌defineEmits() 란?
- 자식 컴포넌트에서 부모컴포넌트로 데이터를 전달할 때 사용한다.
- 부모 컴포넌트에서 emits 옵션으로 이벤트를 정의하고, 자식 컴포넌트에서는 defineEmits를 사용하여 이벤트 목록을 정의한다.
<!-- ParentComponent.vue -->
<template>
<ChildComponent @eventName="handleEvent" />
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
import { defineEmits } from 'vue';
const handleEvent = () => {
console.log('Event received');
};
const emits = defineEmits(['eventName']);
</script>
📌defineProps() 와 defineEmits() 의 공통점
- 사용되는 변수 이름은 CamelCase가 아닌 kebab-case 사용을 권장한다.
- 전달된 옵션은 setup에서 모듈 범위로 호이스트 된다. 따라서 옵션은 setup 범위에서 선언된 로컬 변수를 참조할 수 없다. 참조할 시에 컴파일 에러가 발생한다. 하지만, import한 바인딩은 모듈 범위에 있으므로 참조할 수 있다.
* 호이스트(Hoist) : 끌어올리기, 변수의 정의가 그 범위에 따라 선언관 할당으로 분리되는 것
<참고자료>
https://ko.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
728x90