[Vue3] <script setup>에서 부모가 자식 함수 호출 하는 방법

vue3 에서 자식이 부모의 호출하는 방법이야 emit을 사용하면 되지만,부모가 자식 함수를 호출하는 방법은 생각 보다 잘 알려져 있지 않다. 생각 보다 쓸 일이 없기도 하고...

 

여하튼 찾아본 결과 defineExpose 를 사용하면 된다. 자식 함수의 api를 노출하는 함수 인데, 자식 컴포넌트의 setup내에서 사용 하면 된다.

 

부모

 <template>
  <div>
    <child-component ref="childRef" />
    <button @click="handleClick">Say Hello</button>
  </div>
</template>

<script setup>
import {ref} from "vue"
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null)
const handleClick = () => { 
	childRef.value.childFunc()
}

</script>

 

자식

<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup>
import { defineExpose } from 'vue';
    defineExpose({
      childFunc
    });
    const message = 'Hello, World!';

    const childFunc = () => {
      console.log('Hello from child component!');
    };

</script>

참고

https://shan0325.tistory.com/10

Vue3 defineExpose 사용법