(vue) 부모에서 자식의 매소드 사용하기!

부모에서 자식 메소드를 어떻게 쓰는지 몰라

고생고생하다가(사실 인터넷에 다 올라와 있었는데 그 글을 보고서도 적용할 생각을 안 했었다.)

해결 해 적어본다.

 

자식

자식
<script setup>
	import { ref, defineExpose } from 'vue'

    function pageReset(){
       메소드 내용
    }

    defineExpose({
        pageReset
    });
</script>

 

부모
<template>
	<pageNation ref="pageReset"></pageNation>
</template>

<script setup>
    import pageNation from './PageNation.vue'
    import {ref} from 'vue';

    const pageReset = ref(null) //자식의 메소드 부모에서 사용하기 

    onMounted(() => { 
       pageReset.value.pageReset();
    })
</script>

필요 없는 것들 떼고 요약하면 이렇게 사용하면 되는 거 같다.

 

 

ps. 오늘 <script setup>을 'vue3 setup script'라고 부른 다는 사실을 알게 됐고, 그냥 <script>를 사용하면서 setup을 펑션스타일로 쓰는 경우에는 'vue3 setup function'이라고 부른다는 사실을 알게됐다.