child component의 method를 parent component에서 사용하려고 할 때

(영어 쥐ㅈ 만큼도 못하는데 적는 이유는 나중에 내가 잊어 버렸을 때 구글 검색을 위한 키워드를 위해 적는다.)

 

참조글

https://dev.to/caio2k/expose-child-component-methods-to-parent-components-with-vue-3-script-setup-defineexpose-4ghl

Expose Child Component Methods to Parent Components with Vue 3 defineExpose

 

처음에 defineExpose로 여러개 할 경우, 차일드에서 이렇게 복수의 method를 expose했을 때

defineExpose({
    setCenter,
    setMarkers
})

나는

<kakao :userId="userId" ref="setCenter, setMarker" :latLng="latLng"></kakao>

이렇게 적어야하는 줄 알았다.

그런데 

 

ref는 하나만 적을 수 있다고 하며

 

결론적으로

<template lang="">
    <section class="grid grid grid-cols-[26.875rem_1fr_26.875rem] min-h-[59.5rem] w-[120rem]" >
        <h1>메인 창</h1>
        <section class="col-start-2 bg-pink-400 grid grid-rows-[100px_524px_200px_128px]">

                <h1>메인</h1>
                <div class="row-start-2 z-0">
                        <!-- <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=582abe9ccb2561cbe67f7bcc34c45c1e"></script> -->
                    <kakao :userId="userId" ref="child" :latLng="latLng"></kakao>

                </div>
                <div class="row-start-3 grid grid-cols-3 justify-items-center items-center text-center">
                    <button class="rounded-3xl w-56 h-40 bg-blue-50 text-4xl" @click="modalBtn">사진 업로드</button>
                    <router-link to="/list" class="rounded-3xl w-56 h-40 bg-blue-50  text-4xl grid items-center justify-center">모아보기</router-link>
                    <router-link to="/board" class="rounded-3xl w-56 h-40 bg-blue-50  text-4xl grid items-center justify-center">공략집</router-link>

                </div>

        </section>
    </section>

    <Modal class="z-99 grid justify-center content-center" 
           v-show="showModal" :modalState="showModal" :userId="userId" @closeModal="closeModal" @center="uploadedCenter">

    </Modal>


</template>
<script setup>
import Modal from '../Modal/Modal.vue'
import {ref, onUpdated, reactive} from 'vue';
import kakao from '../Map/KakaoMap.vue'
import { useUserDetailsStore } from '../../stores/useUserDetailsStore.js';
import { useLatLngStore } from '../../stores/useLatLngStore.js';

let userId = useUserDetailsStore().userId;

let latLngStore = useLatLngStore();
// let latLng = reactive([useLatLngStore().lat,useLatLngStore().lng])
const latLng = reactive([
    latLngStore.lat,
    latLngStore.lng
]);


let center1 = reactive([]);
let child = ref(null);

let showModal = ref(false);
console.log(showModal.value)

function modalBtn(){
    showModal.value = true;
    console.log(showModal.value)
}
function closeModal(){
    showModal.value=false;
    showMarkers()
}
function showMarkers() {
    child.value.setMarkers(map)    
}

function uploadedCenter(test){ // 가장 최근에 자식에서 업로드 한 이미지 center값 부모로 받아오기
    center1=test;

    latLngStore.saveCategory(center1.Ma,center1.La)
    
    changeCenter();
    showMarkers();
}

function changeCenter(){
    child.value.setCenter(center1)
}

</script>
<style scoped>


</style>

 

child하나만 선언한 뒤에 child에서 각각의 method를 불러오면 되는 것이었다.

위와 같이 하면 되고

 

아래와 같이 하면 안 된다.

 

<template lang="">
    <section class="grid grid grid-cols-[26.875rem_1fr_26.875rem] min-h-[59.5rem] w-[120rem]" >
        <h1>메인 창</h1>
        <section class="col-start-2 bg-pink-400 grid grid-rows-[100px_524px_200px_128px]">

                <h1>메인</h1>
                <div class="row-start-2 z-0">
                        <!-- <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=582abe9ccb2561cbe67f7bcc34c45c1e"></script> -->
                    <kakao :userId="userId" ref="setCenter, setMarker" :latLng="latLng"></kakao>

                </div>
                <div class="row-start-3 grid grid-cols-3 justify-items-center items-center text-center">
                    <button class="rounded-3xl w-56 h-40 bg-blue-50 text-4xl" @click="modalBtn">사진 업로드</button>
                    <router-link to="/list" class="rounded-3xl w-56 h-40 bg-blue-50  text-4xl grid items-center justify-center">모아보기</router-link>
                    <router-link to="/board" class="rounded-3xl w-56 h-40 bg-blue-50  text-4xl grid items-center justify-center">공략집</router-link>

                </div>

        </section>
    </section>

    <Modal class="z-99 grid justify-center content-center" 
           v-show="showModal" :modalState="showModal" :userId="userId" @closeModal="closeModal" @center="uploadedCenter">

    </Modal>


</template>
<script setup>
import Modal from '../Modal/Modal.vue'
import {ref, onUpdated, reactive} from 'vue';
import kakao from '../Map/KakaoMap.vue'
import { useUserDetailsStore } from '../../stores/useUserDetailsStore.js';
import { useLatLngStore } from '../../stores/useLatLngStore.js';

let userId = useUserDetailsStore().userId;

let latLngStore = useLatLngStore();
// let latLng = reactive([useLatLngStore().lat,useLatLngStore().lng])
const latLng = reactive([
    latLngStore.lat,
    latLngStore.lng
]);


let center1 = reactive([]);
let setCenter = ref(null);
let setMarker = ref(null);

let showModal = ref(false);
console.log(showModal.value)

function modalBtn(){
    showModal.value = true;
    console.log(showModal.value)
}
function closeModal(){
    showModal.value=false;
    showMarkers()
}
function showMarkers() {
    setMarker.value.setMarkers(map)    
}

function uploadedCenter(test){ // 가장 최근에 자식에서 업로드 한 이미지 center값 부모로 받아오기
    center1=test;

    latLngStore.saveCategory(center1.Ma,center1.La)
    
    changeCenter();
    showMarkers();
}

function changeCenter(){
    setCenter.value.setCenter(center1)
}

</script>
<style scoped>


</style>