자식component에서 부모component로 이벤트를 전달하는 방법은 두가지가 있다.

부모

<div id="app" v-cloak>
    <div id="parkList">
        <pl-item
            v-for="plItem in plList"
            :pl-item="plItem"
            :key="plItem.park_id"
            @click="onGoLink"
            >
        </pl-item>
    </div>
</div>

<script type="module">
import { createApp, ref, onMounted, reactive } from "vue"

const app = createApp({
    setup() {
        const plList = ref([])

        function onGoLink(parkNm) {
            console.log(`/${_areaId}/${_itvlSec}/${parkNm}/`)
            //location.href = `/${_areaId}/${_itvlSec}/${parkNm}/`
        }

        return {
            plList,
            onGoLink
        }
    },
})
.component("pl-item", VueUtil.loadModule(`/static/vue/${_areaId}/pl-item.vue`))
.mount("#app")

</script>

1. 자식 component에서 $emit으로 직접 전달히기

자식

<template>
    <div class="parkItem">
        <div class="parkBox">
            <span class="parkNm"><a href="javascript:void(0)" @click="$emit('click', plItem.park_nm)">{{ plItem.park_nm }}</a></span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        plItem: Object
    },
    
    emits: ["click"],

    setup(props, context) {

    },

    mounted() {
    },
}
</script>

2. 자식 component에서 method로 전달하기

자식

<template>
    <div class="parkItem">
        <div class="parkBox">
            <span class="parkNm"><a href="javascript:void(0)" @click="click(plItem.park_nm)">{{ plItem.park_nm }}</a></span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        plItem: Object
    },
    
    emits: ["click"],

    setup(props, context) {
        function click(name) 
        {
            context.emit("click", name);
        }

        return {
            click
        }
    },

    mounted() {
    },
}
</script>

자식 componet에서 이벤트를 선언하여 a tag의 네이티브 이벤트인 href cllick이벤트는 부모 component로 전달이 안되도록 한다.

이게 없다면 파라메타 없는 이벤트가 한번 더 부모 component로 전달된다.

emits: ["click"],

참조 : https://ko.vuejs.org/guide/components/events.html