vue3 composition api 에서 다른 컴포넌트 함수 호출

composition api 의 <script setup> 을 이용하여 다른 컴포넌트의 값을 가져오거나 

다른 컴포넌트 함수를 호출하는 방법을 알아보도록 한다.

App.vue

<script setup>

const dd = (log, head='') => {
    console.log('>>>'+head);
    console.log(log)
};


import {
  ref,
  onMounted,
  onUnmounted,
  watch,
  reactive,
  defineExpose,
  defineProps,
} from 'vue';


import send from '@/components/send.vue'

const child = ref(null);
const onCall = () => {
  dd(child.value.a, 'child.value.a')
  child.value.tt();
};

onMounted(()=>{
  Worker.init();
  onCall();  
})

</script>


<template>
    <div>
        <send ref="child"/>
    </div>
</template>

send.vue (자식 컴포넌트)

<script setup>
import { W1910A01 } from '@/store/W1910A01';

const a = '123';
const tt =_=>alert(123);

defineExpose({
    tt,a
});

</script>  

<template>
</template>

주의) defineExpose 없으면 작동하지 않습니다.

 

 

참고 : https://stackoverflow.com/questions/72223441/call-a-function-from-another-component-using-composition-api

Call a function from another component using composition API

https://stackoverflow.com/questions/73344760/defineexpose-from-components-script-setup-not-working-in-vue-3

defineExpose from component's <script setup> not working in vue 3