【vue/Nuxt.js】composition APIを使用した子から親へのデータ受け渡しの書き方

composition APIを使用して子コンポーネントのデータ（イベント）を親コンポーネントに渡す方法についてメモ

defineEmitsで定義する

composition APIでは$emitの役割を持つ変数を作ってdefineEmitsでカスタムイベントを定義します。

子コンポーネント側

<script setup>
const emit = defineEmits(['hogeEvent']); //emit以外でもok
const hoge = () =>{
    emit('hogeEvent');
}
</script>
<template>
    <button type="button" @click="hoge">emitテスト</button>
</template>

親コンポーネント側

親コンポーネント側は定義したカスタムイベント名に処理を書くだけでok。

<script setup>
const customEvent = () =>{
  console.log('test')
}
</script>
<template>
  <ChiledComponents @hogeEvent="customEvent"></ChiledComponents>
</template>

参考

【Vue3 props/emit】コンポーネント間通信
defineProps() & defineEmits()