Vue コンポーネントにクリックイベントをつける方法


タイトル通り、Vue コンポーネント自体にクリックイベントをつけたかったのですが、思うようにいかず、ドハマリしてしまいました。。
Vue.js では、下記のような方法でコンポーネントにイベントをつけても function は実行されません。

<Component @click="function">button</Component>

解決方法

Vue コンポーネント自体にクリックイベントを仕込みたいときは、以下のように書くと OK です。
肝は click の後ろの.nativeです。.native がなければクリックイベントは発火しません。

<Component @click.native="function">button</Component>

参考

公式による解説は ↓ にありました。
> コンポーネントにネイティブイベントをバインディング

また、公式曰く拡張性を考えると、$listeners プロパティをつかったほうが良いとのこと。