Vue.js イベント修飾子のまとめ

Vue.jsは、イベント処理を簡素化するための様々な修飾子を提供しています。以下は主要な修飾子の概要です。

.sync

• 双方向バインディングを簡単に実装
• 親コンポーネントから子コンポーネントへのプロパティ更新を可能に

<child-component :title.sync="pageTitle"></child-component>

.stop

• イベントの伝播を停止
• event.stopPropagation()と同等

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

.prevent

• イベントのデフォルト動作を防止
• event.preventDefault()と同等

<form @submit.prevent="onSubmit">...</form>

.once

• イベントリスナーを一度だけ実行し、その後自動的に削除

<button @click.once="showWelcomeMessage">ようこそ</button>

.capture

• イベントをキャプチャフェーズで処理
• 外側の要素から内側の要素の順でイベントを処理

<div @click.capture="outerClick">
  <button @click="innerClick">クリック</button>
</div>

.self

• イベントが要素自体からディスパッチされた場合にのみハンドラをトリガー
• 子要素からのイベントバブリングを無視

<div @click.self="handleClick">
  <button @click="buttonClick">ボタン</button>
</div>

これらの修飾子は単独で使用することも、組み合わせて使用することもできます（例: @click.once.prevent）。適切に使用することで、より細かなイベント制御が可能になり、コードの可読性と効率性が向上します。