2021-05-13 Vue.jsイベント修飾 .capture .self .native
[メモ]Vue.jsイベント修飾子一覧
上記事より抜粋。
.capture
キャプチャモードでDOMイベントをハンドルする。 つまりルート要素から順番にイベントが実行される。
<div @click="handler('親')">
<div @click.capture="handler('子')">
ボタン
</div>
</div>
.self
event.targetが自分自身の場合のみハンドラが呼び出される。 (子要素は呼び出されない)
<div v-on:click.self="handler">ボタン</div>
.native
コンポーネントのルート要素上のネイティブイベントをハンドルする。
<!-- コンポーネントをクリックするとhandlerが呼び出される -->
<my-component @click.native="handler"></my-component>
<!-- コンポーネントをクリックしてもhandlerが呼び出されない -->
<my-component @click="handler"></my-component>