Vue.jsイベント修飾子の一覧とその機能

今回はVue.jsのイベント修飾子について書きたいと思います。

ある程度Vue.jsでの開発を進めていくと、単純に「イベントが発生したら実行」と言うわけにはいかない場合があります。
そう言うときにイベントを制御することができるのがイベント修飾子です。


書き方の例は以下となります。

@click.修飾子="◯◯◯"

どのような修飾子があるか、どのような機能を持っているのか順番に紹介したいと思います。

.stop

<div class="parent" @click="click">
  <div class="child" @click.stop="click">
    Click!
  </div> 
</div>

本来、childをクリックするとchildのイベントと一緒にparentのイベントも発生してしまいます。
親要素のイベントまで発生させたくない場合、.stopの修飾子をつけると親要素のイベントは発生しなくなります。

.prevent

<a href="https://www.yahoo.co.jp/" @click.prevent="click">Click!</a>

要素のデフォルトの動きを止めることができます。
上記の例の場合、クリック時はclickイベントのみ発生しますが、
.preventがないとaタグ本来の挙動としてYahooのトップページへ遷移します。

.capture

<div class="parent" @click="click">
  <div class="child" @click.capture="click">
    Click!
  </div> 
</div>

.captureは子要素のイベント時に親要素のイベントを先に実行します。
本来ならchild要素クリック時は childイベント→parentイベント の順でイベントが実行されますが、
.captureをつけることで parentイベント→childイベント の順で実行されます。

.self

<div class="parent" @click.self="click">
  <div class="child">
    Click!
  </div> 
</div>

.selfは自身がイベントの発生源である時のみ実行されます。
本来ならchildをクリックするとparentのイベントは実行されますが、
.selfをつけることで、childをクリックしてもparentのイベントは実行されなくなります。

.once

<div @click.once="click">Click!</div>

.onceはイベントの実行を1回のみに制限します。
クリック1回目はclickイベントが発生しますが、2回目以降は発生しなくなります。

.passive

.passiveはイベントの完了を待たずにスクロールができるようになります。
この修飾子はモバイルでのパフォーマンスを改善するのに効果的みたいです。
また、公式ドキュメントにもありますが.preventとの併用は不可となります。

おわりに

Vue.jsやNuxt.jsのプロジェクトを何個か経験した中で、
イベント修飾子は痒いところに手が届く機能であると感じています。

特にプロジェクトの規模が大きくなるにつれて使用する確率が上がっていくと思います。
イベント修飾子を正しく使用し、予期せぬエラーなどを起こさないように注意していきたいです。




参考
イベントハンドリング ー Vue.js