[vue3] defineExpose 사용법

Vue 3의 defineExpose 함수는 Composition API와 함께 사용되며 컴포넌트의 내부 로직을 외부에서 액세스 가능하게 만들 때 사용됩니다. 

기본적으로 Vue 3에서는 컴포넌트 내부의 상태와 메서드가 비공개(private)이며 컴포넌트 외부에서 직접 액세스할 수 없습니다. 

그러나 defineExpose를 사용하면 컴포넌트의 일부를 외부로 노출하고 다른 컴포넌트에서 액세스할 수 있도록 할 수 있습니다.

defineExpose는 컴포넌트 내부에서 호출되며 다음과 같이 사용됩니다:

main.vue
# 외부에 공개할 함수 선언
<script setup>
	import { ref } from 'vue';

	const message = ref('Hello, world');

    // 외부로 노출하고자 하는 상태나 메서드
    const showMessage = () => {
      alert(message.value);
    };

    // 컴포넌트 외부로 노출
    defineExpose({ showMessage });
    
</script>


compo.vue

<template>
  <div>
    <button @click="showMessage()">Show Message</button>
  </div>
</template>

<script setup>
import main from './main.vue';

</script>

defineExpose를 사용하여 컴포넌트의 일부를 외부로 노출하면 컴포넌트 간의 상호 작용 및 재사용성을 높일 수 있습니다. 

그러나 주의해야 할 점은 무분별한 노출은 컴포넌트의 캡슐화를 저해할 수 있으므로 필요한 부분만 노출하는 것이 좋습니다.