$emit() コンポーネントイベントの発火

最終更新:2026-10-22

$emit() コンポーネントイベントの発火

$emit はカスタムイベントを発火させ、引数は親のリスナーへ届きます。子から親への標準的なチャネルです。

グループオプション: 合成とその他
種類オプション
スコープコンポーネント内
Vue バージョン3.0+
SSR 対応対応

📝 構文

export default {
  methods: {
    save() { this.$emit("save", { id: 1 }) }
  }
}

⚙️ 引数

valueイベント名と任意のペイロード引数

戻り値:戻り値なし

▶ 例

以下のコードを編集して結果を確認しましょう:

出力:

Clicking shows the payload id.

💡 ポイント

ℹ️ 補足 emits に名前を宣言すると警告を避けられ、ツールのサポートも得られます。
💡 ヒント DOM テンプレートでは kebab-case の名前を推奨します。
⚠️ 注意 イベント名は大文字小文字を区別し、DOM テンプレートでは小文字化されます。
関連ケースは近日公開予定。

📚 関連チュートリアル

❓ よくある質問

Q 子のメソッドを呼ぶのと比べてどうですか?
A emit は単方向フローを保ちます。ref 呼び出しはコンポーネントを密結合させます。
Q 複数の引数を渡せますか?
A 渡せます。ハンドラーが順番に受け取ります。
Q 誰もリッスンしないとどうなりますか?
A 何も起きません。イベントは任意です。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%