[VUE3] defineEmits vs defineExpose

회사에서 일하다... datepicker와 input radio 선택 후 모달 취소버튼을 누르면 초기화작업을 해야하는데 아무리 emit으로 보내도 반응이 없었는데... 다행히 천사같은 선임님이 알려주셔서 해결할 수 있었다...

defineExpose를 이때 알게 되었는데 둘의 차이를 확실히 해두면 좋을 것 같아서 작성한다

 

1️⃣ defineExpose

• 자식 컴포넌트 내에서 부모 컴포넌트에게 노출할 변수나 함수를 정의하는 데 사용.
• 자식 컴포넌트에서 expose를 사용하여 노출된 속성들을 정의.
• 부모 컴포넌트에서 자식 컴포넌트의 인스턴스에 접근하여 해당 노출된 속성을 사용할 수 있음
• 자식에서 부모로 데이터를 노출시킬 때 사용

// ChildComponent.vue
import { defineComponent, defineExpose } from 'vue';

export default defineComponent({
  setup() {
    const message = 'Hello from child';
    
    // Expose message to parent
    defineExpose({
      message,
    });

    return {};
  }
});

 

<!-- ParentComponent.vue -->
<template>
  <ChildComponent ref="childRef" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const childRef = ref(null);

    // Accessing the exposed message
    console.log(childRef.value.message);

    return { childRef };
  },
};
</script>

 

 

2️⃣ defineEmits

• 자식 컴포넌트 내에서 이벤트를 정의하여 부모 컴포넌트로 보낼 때 사용.
• 이벤트는 부모 컴포넌트에서 리스닝하여 자식 컴포넌트의 동작을 조작하거나 상태를 변경하는 데 사용.
• 자식에서 부모로 이벤트를 발생시킬 때 사용