🧊

.native.preventを理解する

に公開
Nuxt
tech

.native で .prevent とは一体？

Nuxt2 系を使って実装をするときに、 @click.native.prevent こんなのが稀に出てきたりします。
こちら、 .native 修飾子をつけて、さらに .prevent 修飾子をつけているわけですが、これって一体どんな挙動を目指しているのでしょうか。

まずは .native から理解する

native は一体何かというと、 コンポーネントがネイティブのイベントをリッスンするために使用するもの とのこと。
簡単な例を上げると

index.vue
<template>
  <div>
    <ExampleComponent @click.native="testFunc" />
  </div>
</template>

<script>
import ExampleComponent from './components/ExampleComponent.vue'

export default {
  components: {
    ExampleComponent,
  },
  methods: {
    testFunc() {
      console.log('fired');
    },
  },
}
</script>

この index.vue の ExampleComponent コンポーネントに記載している .native がそれにあたります。
本来コンポーネントのイベントは emit でしか発火できません。これを emit なしでも発火させるようにするためのものが .native というわけです。
上記の例だと、コンポーネントを押下すると fired とコンソールが表示されます。
ちなみにこちらの .native は Vue3 からは廃止されています。詳しくは下記公式をご覧ください。
参考：v-on.native 修飾子の削除

.prevent はなに

.prevent は簡単です。 event.preventDefault() を呼び出します。
たとえば、 a はクリックしたときに href 属性に指定した URL への遷移を行います。
preventDefault をしてあげると、こちらのイベントを止めることができるわけです。

.native.prevent はどうなるのか

ここまで整理できればもうわかるかと思います。
.native でコンポーネント自体はネイティブイベントをリッスンしつつ、 .prevent でコンポーネント自体のデフォルトイベントを制御すると言う挙動ができるわけです。

終わりに

たまたま実装中に私はこのような事例に遭遇しましたが、基本あまり書くことはないかもしれません（ .native と prevent のそれぞれを使う場面は何と無く想像できるが、併用するタイミングは結構稀な気がする）。
そもそも .native .prevent と併用するのはややレアケースかなと思いました（事例も全然思いつかない）。

Discussion