コンポーネントにクリックイベントを付ける際に、若干ハマりポイントがあるのでご紹介します。

読者の想定

• Vueのプロジェクトを作成している

子コンポーネント

スタイリングは、Tailwind cssで行っています。

<template>
  <button
    class="block w-3/6 max-w-full text-left px-4 py-6 text-center bg-blue-50 hover:bg-blue-400 hover:text-white transition-all"
  >
    ボタン
  </button>
</template>

親コンポーネント

単純に考えるとこんな感じで記述したいですよね。

<template>
  <div class="Hoge">
        <Component ＠click="add()" />
  </div>
</template>

しかしこれだと動作しません。
正しく動作させるためには、@clickの後に.nativeを付ける必要があります。

<template>
  <div class="Hoge">
        <Component ＠click.native="add()" />
  </div>
</template>

これで期待通りの動作になるはずです。


.nativeは、Vue3.xにて削除されているようです。

追記

.nativeでも間違いではないのですが、下記のように$emitを使用した方法が主流のようです。

-子コンポーネント

<template>
  <button
    class="block w-3/6 max-w-full px-4 py-6 text-center bg-blue-400 hover:bg-blue-500 text-white transition-all"
    @click="$emit('btnClick')"
  >
    ボタン
  </button>
</template>

-親コンポーネント

<template>
  <div>
     <Component @btnClick="add()" />
  </div>
 </template>