[Vue 3] defineProps() 와 defineEmits() 비교하기

 

📌들어가기 전

---

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() 의 공통점

---

1. 사용되는 변수 이름은 CamelCase가 아닌 kebab-case 사용을 권장한다.
2. 전달된 옵션은 setup에서 모듈 범위로 호이스트 된다. 따라서 옵션은 setup 범위에서 선언된 로컬 변수를 참조할 수 없다. 참조할 시에 컴파일 에러가 발생한다. 하지만, import한 바인딩은 모듈 범위에 있으므로 참조할 수 있다.
   * 호이스트(Hoist) : 끌어올리기, 변수의 정의가 그 범위에 따라 선언관 할당으로 분리되는 것

 

 

 

 

 

 

 

<참고자료>

https://ko.vuejs.org/api/sfc-script-setup.html#defineprops-defineemits

Vue.js

https://velog.io/@byebye62/Vue-script-setup%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A3%BC%EA%B3%A0-%EB%B0%9B%EA%B8%B0-defineProps-defineEmits

Vue script setup에서 부모, 자식 컴포넌트 데이터 주고 받기 (defineProps, defineEmits)