Nuxt3 子から親へのコンポーネント間通信

はじめに

子から親へのコンポーネント間通信はEmitという仕組みで実現できる。
子コンポーネントから親コンポーネントのメソッドを実行、データの受け渡しの仕組みをまとめた。

子コンポーネント側

Emit定義

components/Component.vue

interface Emits {
    (event: "イベント名", 渡したい変数名: 型): 戻り値の型;
}
const emit = defineEmits<Emits>();

子コンポーネント内でEmitを定義する。
（）内は引数名を記述。なんでも良いが、イベントを表すため、eventやeを記述することが多いらしい。
第二引数にはあれば渡したい変数名と型を定義する。
そして戻り値の型を定義する。
defineEmits<Emits>とは簡単にいうと、定義したemitを使うための関数。?

子で親のメソッドを実行する

components/Component.vue

const buttonClick = ():void => {
    emit("イベント名", 渡したい変数名);
}

components/Component.vue

<template>
    <div>
        <button @click="buttonClick">クリック</button>
    </div>
</template>

子コンポーネントで、親側のメソッドを実行したいタイミングでemit()を実行する。
今回のケースだとボタンをクリックするとbuttonClickメソッドが呼び出され、emit()で親へ。

親コンポーネント側

親コンポーネントでのメソッド

App.vue

const onButtonClick = (渡された変数名: 型):戻り値の型 => {
    //処理
}

引数に子コンポーネントのemit()第二引数に記述した変数を記述すると、データを貰える。

子コンポーネントタグ内でイベントを記述

App.vue

<template>
    <Component
     v-on:イベント名="onButtonClick"/>
</template>

子コンポーネントのemit()が読まれると、上記のonButtonClickメソッドが実行。

おわり

これで子コンポーネントから親コンポーネントのメソッドを実行でき、データも渡すことができる。
ここからprops、v-modelを併用することでより簡潔に書けたり、リアクティブシステムを存分に使うことができる。