タイトル: クリック時のイベント処理(on:click)
SEOタイトル: Vue.js @click / v-on:click 完全ガイド（修飾子・$event・Composition API・$emit）
| この記事の要点 |
|
基本: @click と v-on:click
Vue.js でクリックイベントを扱う最も基本的な書き方は v-on:click ディレクティブで、@ で省略できます。
$event: ネイティブイベントオブジェクト
メソッドの引数に $event を渡すと、DOM の MouseEvent をそのまま受け取れます。
引数を書かずに @click="onClick" としても、第一引数に自動的に MouseEvent が渡されます。
イベント修飾子（Modifiers）
頻出のイベント処理を 修飾子で 1 行に書けます。e.preventDefault() 等を JS 側に書かずに済みます。
| 修飾子 | 動作 | 等価な JS |
|---|---|---|
.stop | イベント伝播を止める | e.stopPropagation() |
.prevent | デフォルト動作をキャンセル | e.preventDefault() |
.capture | キャプチャフェーズで処理 | addEventListener の第 3 引数 true |
.self | 自身が target のときだけ発火 | if (e.target === e.currentTarget) |
.once | 一度だけ発火 | addEventListener の {once:true} |
.passive | パッシブリスナー（スクロール最適化） | addEventListener の {passive:true} |
独自処理
マウスボタン・キー修飾子
Composition API でのクリック処理
-
{{ item.name }}
子コンポーネントから親へ: $emit
子コンポーネントでクリックが起きたとき、親に通知するには $emit（Composition API では defineEmits）を使います。
押す
v-on のオブジェクト構文（複数イベント）
React onClick との比較
| 項目 | Vue.js | React |
|---|---|---|
| 記法 | @click="fn" | onClick={fn} |
| 引数渡し | @click="fn(id)" | onClick={() => fn(id)} |
| イベント取得 | $event または第一引数 | 第一引数 SyntheticEvent |
| preventDefault | @click.prevent | e.preventDefault() 手動 |
| stopPropagation | @click.stop | e.stopPropagation() 手動 |
| カスタムイベント | $emit + defineEmits | props として渡す |
よくあるトラブル
@click="fn()"と書いてレンダリング時に即実行されてしまう → 引数が無いなら@click="fn"に。引数があるなら@click="fn(arg)"のまま OK（テンプレ式は遅延評価される）- v-for 内でクリック先が間違う →
:keyが無い / 重複している。一意キーを付ける - 子コンポーネントの @click が効かない → ルート要素が単一でない場合、attrs 継承されない。
defineEmits(['click'])+@click="$emit('click', $event)"で明示 - ボタン連打で多重送信 →
.once修飾子、またはdisabled制御
FAQ
Q: Vue 2 と Vue 3 で書き方は変わる？
A: 基本構文は同じ（@click、修飾子、$emit）。Vue 3 は Composition API（