emits 発行するイベントの宣言
最終更新：2026-10-22
emits 発行するイベントの宣言
emits オプションは、コンポーネントが親に向けて発行するイベントを宣言します。ドキュメント化と実行時の検証の役割を持ち、未宣言のイベントは警告が出ます。
| グループ | オプション: 状態 |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
export default {
emits: ["change", "submit"],
methods: {
fire() { this.$emit("change", 1) }
}
}⚙️ 引数
| value | 配列またはオブジェクト：オブジェクト形式では検証関数 (payload) => boolean を書けます |
|---|
戻り値：戻り値なし（this.$emit で発火します）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Clicking shows 'Message received: from child'.💡 ポイント
💡 ヒント 宣言すると IDE と開発者ツールの両方でイベントが認識され、親コンポーネントのテンプレートでも補完が効きます。
⚠️ 注意 v-model をサポートする場合の補足：update:modelValue も emits に書かないと警告が出ます。
ℹ️ 補足 イベント名は kebab-case を推奨します（HTML 属性は大文字小文字を区別せず、camelCase は小文字化されます）。
🏷️ 関連状態
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q emits を宣言しないとどうなりますか？
A 機能は動きますが、開発環境で警告が出て、透過属性としてイベントリスナーが誤って落ちてくることがあります。
Q 複数の引数を渡せますか？
A できます。$emit('change', a, b) とすると、親の処理関数が順番に受け取ります。
Q イベント名に camelCase を使えますか？
A 非推奨です。DOM テンプレートでは名前が小文字化されるため、kebab-case が最も安全です。
