[Vue3] defineExpose

defineExpose란?

vue3에서 defineExpose란 자식 컴포넌트에서 선언된 함수(API)를 부모 컴포넌트에서 직접적으로 호출(import)하여 사용할 수 있는 함수입니다.

사용 방법

아래 코드는 Composition API 에서 defineExpose를 사용하는 간단한 방법입니다.

1. childComponent.vue
자식 컴포넌트에서 expose할 함수 선언

<script setup>
import { defineExpose } from 'vue'

const test = () => {
	console.log('@@@TEST@@@')
}

defineExpose({test}) // test라는 함수를 expose 해주기
</script>

2. 부모에서 함수 호출

<template>
	<button @click="test">자식함수호출!</button>
	<childComponent ref="$childRef" />  <!-- 자식요소에 접근하기 위한 ref 선언 -->
</template>

<script setup>
import {ref} from 'vue'
import childComponent from '~/components/childComponent.vue'

const $childRef = ref()
const test = () => {
	$childRef.value.test() //child에서 expose한 함수명
}
</script>