Vue.jsのemitを初心者向けに解説：子コンポーネントから親へデータを渡す方法

フロントエンド開発•2025/1/24

はじめに

Vue.jsは、コンポーネント同士のデータのやり取りをシンプルに実現できるフレームワークとして多くの方に活用されています。その中でもemitは、子コンポーネントから親コンポーネントへイベントやデータを渡すための仕組みとしてよく利用されます。初心者の皆さんにとっては「どうすれば子コンポーネントから親へ値を渡せるのか」が少し不思議に感じられるかもしれません。そこでこの記事では、初めてVue.jsを触る方にも理解しやすいように、emitの基本的な使い方から実務での具体的な活用例までをわかりやすく解説します。

まずは全体像をつかむために、emitとは何かをざっくりと見ていきましょう。

Vue.jsにおけるemitとは

Vue.jsでのコンポーネント間通信には、主に「親から子へprops（プロパティ）を渡す方法」と「子から親へemitする方法」があります。 emitは文字通り「イベントを発行する」という意味があり、子コンポーネント側から何らかのアクションを伝える際に活用されます。たとえばボタンをクリックしたタイミングで、子コンポーネントは「クリックされましたよ」という合図を親に送ることができます。

なぜこの仕組みが重要なのかというと、Vue.jsではコンポーネントごとに役割をはっきり分けることが多いからです。デザインや画面部分（UI）に専念する子コンポーネントと、データ管理やロジックを担う親コンポーネントを分離することで、コードが読みやすく保守もしやすくなります。そのため、emitを上手に使うことによって親子間の連携をスムーズにし、Vue.jsならではの開発スタイルを生かせるようになるわけです。

子コンポーネントから親コンポーネントへデータを渡す流れ

子コンポーネントから親コンポーネントへイベントをemitし、親コンポーネント側でそのイベントを受け取るという流れはシンプルですが、最初に見ると少し戸惑うかもしれません。ここでは基本的な手順を具体的なコードとともに見ていきましょう。

子コンポーネントの実装

子コンポーネントでは、テンプレート内にクリックボタンなどのイベント発生源となる要素を置きます。その要素からemitメソッドでイベントを発行するイメージです。


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

<script>
export default {
  name: "ChildComponent",
  emits: ["childClicked"],
  setup(props, { emit }) {
    const handleClick = () => {
      emit("childClicked", "子コンポーネントからのメッセージ");
    };

    return {
      handleClick
    };
  }
};
</script>

上記の例では、子コンポーネント名をChildComponentとし、ボタンをクリックしたらchildClickedというイベント名をemitしています。イベント名は自由につけられますが、何を示すイベントなのかわかりやすい名前をつけるのがおすすめです。

親コンポーネントでの受け取り

次に親コンポーネントでは、子コンポーネントを呼び出す際に@childClicked="handleChildClick"のようにv-on記法でイベントを受け取ります。


<template>
  <div>
    <ChildComponent @childClicked="handleChildClick" />
    <p>メッセージ: {{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent
  },
  setup() {
    const message = Vue.ref("");

    const handleChildClick = (payload) => {
      message.value = payload;
    };

    return {
      message,
      handleChildClick
    };
  }
};
</script>

上記では子コンポーネントから渡された文字列（payload）をmessageという変数にセットし、画面に表示するようになっています。このように、emitによって子→親へデータを渡す仕組みを実現できます。

実際の業務例: フォーム送信のシナリオ

実務では、ユーザー入力フォームを作るケースがよくあります。子コンポーネントでユーザーが入力した内容を、一度にまとめて親コンポーネントに送信する場面を考えてみましょう。たとえば住所入力のコンポーネントと、ユーザー情報を表示・管理する親コンポーネントがあるとします。

例：住所入力フォーム子コンポーネント

以下のように、テキストフィールドを複数用意して、フォームの送信ボタンを押した段階でまとめてemitするイメージです。


<template>
  <div>
    <label>
      郵便番号:
      <input type="text" v-model="postalCode" />
    </label>
    <label>
      住所:
      <input type="text" v-model="address" />
    </label>
    <button @click="submitForm">送信</button>
  </div>
</template>

<script>
export default {
  name: "AddressForm",
  emits: ["formSubmitted"],
  setup(props, { emit }) {
    const postalCode = Vue.ref("");
    const address = Vue.ref("");

    const submitForm = () => {
      const formData = {
        postalCode: postalCode.value,
        address: address.value
      };
      emit("formSubmitted", formData);
    };

    return {
      postalCode,
      address,
      submitForm
    };
  }
};
</script>

ここでは郵便番号と住所を入力させ、ボタンがクリックされたタイミングでformSubmittedイベントを親へemitしています。実務シーンでも、送信時にまとめて渡すとデータ管理が簡単になることが多いです。

例：親コンポーネントでの受け取りと処理

親コンポーネント側では、受け取ったデータを表示するだけでなく、サーバーに送る処理を組み込むことが多いです。ただ、この記事では具体的なバックエンド連携は深く触れません。以下の例では、受け取った郵便番号と住所を画面に表示するだけにしています。


<template>
  <div>
    <AddressForm @formSubmitted="handleFormSubmit" />
    <p>郵便番号: {{ postalCode }}</p>
    <p>住所: {{ address }}</p>
  </div>
</template>

<script>
import AddressForm from "./AddressForm.vue";

export default {
  name: "UserProfile",
  components: {
    AddressForm
  },
  setup() {
    const postalCode = Vue.ref("");
    const address = Vue.ref("");

    const handleFormSubmit = (data) => {
      postalCode.value = data.postalCode;
      address.value = data.address;
      // ここでAPIに送信するといった処理も可能です
    };

    return {
      postalCode,
      address,
      handleFormSubmit
    };
  }
};
</script>

これでフォームの送信ボタンが押されたとき、子コンポーネントからemitされたデータを受け取り、親コンポーネントで活用できるようになります。実際のプロジェクトでも同様に、バックエンドに送信したり、画面に表示したりといった手続きを簡潔に整理できます。

emitの引数と使い方の詳細

emitでは単一の引数だけでなく、複数の引数を渡すことも可能です。たとえば以下のように、2つの値を同時にemitする場合があります。


emit("customEvent", "textValue", 123);

親コンポーネント側では


handleEvent(text, number) {
  console.log(text);   // "textValue"
  console.log(number); // 123
}

のように複数パラメータとして受け取ることができます。ただし、複数の値をやり取りする際は、どんな順序でどんな型のデータが渡ってくるかを把握しておかないと混乱しがちです。可読性の観点からは、1つのオブジェクトにまとめて渡す方が、データの意味をわかりやすく保持できます。

イベント名を設定する際は、機能に関連する名前をつけるのがおすすめです。たとえばデータを送信するなら「sendData」や「submitForm」のように意味が分かる名前にすると、チーム開発でも理解しやすくなります。

また、emits: ["formSubmitted"]といった形で、どんなイベントをemitするかをコンポーネント定義で明示しておくと、コードの可読性が上がります。 Vue 3ではemitsオプションに配列やオブジェクトを指定することで、予定されたイベント以外をemitしようとすると警告を出してくれる機能もあります。

バージョン3の特徴と注意点

Vue 3ではComposition APIが本格的に導入され、開発者が柔軟にデータやメソッドを構成しやすくなりました。ただ、emit自体の基本的な動きは、Options APIでもComposition APIでも大きく違いはありません。 setupメソッドの引数で受け取るemitを使ってイベントを送信し、親コンポーネントで受け取るという流れは同じです。

一方、TypeScriptを使う場合や、大型アプリケーションでコンポーネントが増える場合は、どのイベント名をどのコンポーネントが受け取るのかをしっかり整理しておきましょう。冗長になりそうな場合は、状態管理ライブラリを導入してグローバルに状態を扱うと、親子関係に依存しすぎない設計も可能です。ただし、まずはemitによる基本的な親子間通信をしっかり押さえておくと、Vue.jsの開発全体を見通しやすくなるはずです。

よくある疑問やトラブルシューティング

初心者の皆さんが最初に行き詰まりがちなポイントとして「emitしたのに親でイベントが受け取れない」ということが挙げられます。こうした場合、以下の点をチェックしてみると原因を突き止めやすいです。

イベント名にタイプミスがないか
@childClickedのつもりが@childClickededのようになっていないか
emitメソッドの引数の順番と、親メソッドの受け取り方が一致しているか
親コンポーネントで正しいメソッド名を指定しているか

これらの小さなtypoや命名ミスがあると、イベントを正しく受け取れません。また、イベント名の大文字・小文字の違いにも気をつけましょう。

コンポーネントの可読性を保つには、イベント名・関数名・変数名の命名規則をチーム内で統一することが大切です。イベント名の慣例としては、キャメルケースよりもケバブケース（child-clickedなど）を使うという方針をとるプロジェクトもあります。

まとめ

ここまで、Vue.jsにおけるemitの仕組みと使い方を解説してきました。子コンポーネントから親コンポーネントへのイベント送信は、Vue.jsでのコンポーネント分割を活かす上で不可欠なテクニックといえます。実務でもフォーム送信やUI操作の通知など、多彩な場面で活用されるので、初心者の皆さんはまずこの基本をしっかり身につけておくと安心です。

要点としては、以下の3つが挙げられます。

emitは「子→親」へイベントを送るための仕組み
イベント名や引数の内容は明確にして、チーム開発でもわかりやすいように整える
Vue 3のComposition APIでも基本的な使い方は同じだが、emitsオプションでイベントを宣言すると可読性と保守性が向上する

最後にもう一度、子コンポーネント側でemit("イベント名", データ)を呼び出し、親コンポーネント側で@イベント名="メソッド名"で受け取る流れさえ押さえれば、Vue.jsのコンポーネント間通信がグッとスムーズになるのではないでしょうか。これを機に、ぜひ皆さんの開発でも使いこなしてみてください。