page/index.vue

<template>
  <div>
    <Hello
      :main-title="mainTitle"
      @update-title="handleUpdateTitle"
      ref="hello"
    />
    <!-- 호호 버튼을 누르면 defineExpose 함수 작동 -->
    <button @click="handleHoClick">호호 버튼</button>
  </div>
</template>

<script setup lang="ts">
// defineExpose를 활용하기 위해 ref선언 후 컴포넌트 ref에 넣어주기
const hello = ref();

const mainTitle = ref<string>('안녕하세요.');

function handleUpdateTitle(title: string): void {
  mainTitle.value = title;
}

// hello.value.addHo()로 함수 작동
function handleHoClick() {
  hello.value.addHo();
  hello.value.me++;
}
</script>

components/Hello.vue

<template>
  <div>
    <h1>{{mainTitle}}</h1>
    <button @click="handleClick">Change Title</button>
  </div>
</template>

<script setup lang="ts">  
const props = defineProps({
  mainTitle: {
    type: String,
    default: 'No hello'
  }
});
const me = ref<number>(1);

const emit = defineEmits<{
  (e: 'update-title', title: string): void
}>();

const mainTitle = ref<string>(props.mainTitle);

watch(() => mainTitle, () => emit('update-title', mainTitle.value));

function handleClick() {
  mainTitle.value += ' 하'
}

// defineExpose 함수
function addHo() {
  mainTitle.value += ' 호'
  console.log(me.value)
}


// defineExpose로 넘기기
defineExpose({
  addHo,
  me
})
</script>

defineExpose

• 자식 컴포넌트에서 만든 함수를 부모 컴포넌트에서 실행 가능
• ref로 선언한 변수도 부모 컴포넌트에서 변경 가능!!
• 아니 이러면 완전 emit이 필요 없는 거 아니냐고~~~
  • emit이 부모 컴포넌트의 변수에 할당해준다면 defineExpose는 자식 컴포넌트의 변수나 함수를 작동시킴

자식 컴포넌트

• 변수 및 함수 선언
• defineExpose({ })에 넘기고 싶은 변수나 함수 넣어줌

부모 컴포넌트

• ref로 컴포넌트 변수 생성
• 자식 컴포넌트 속성에 ref 추가
• 변수.value.defineExpose 형태로 넣어줌
• 자식에서 변경 발생