Vueでv-on:click.nativeを使う時

Vueでv-on:click.nativeを使う時とnativeが不要な時を備忘録としてこちらにまとめます。

[v-on:click.native を使うケース]

子コンポーネント

Vue.component('child-component', {
  template: '<button>クリックしてみて</button>'
});

親コンポーネント

new Vue({
  el: '#app',
  template: `
    <div>
      <child-component v-on:click.native="handleClick"></child-component>
    </div>
  `,
  methods: {
    handleClick() {
      alert('親コンポーネントでクリックイベントがキャッチされました');
    }
  }
});

※ 親コンポーネントが<child-component v-on:click.native="handleClick"></child-component>で子コンポーネントを呼び出している。
child-componentにv-on:click.native="handleClick"を渡しているので、子コンポーネントのボタンでは、ボタンをクリックした時に親コンポーネントのhandleClickが呼ばれる。

[v-on:click を使うケース]

子コンポーネント

Vue.component('child-component', {
  template: '<button @click="handleClick">クリックしてみて</button>',
  methods: {
    handleClick() {
      this.$emit('custom-click');
    }
  }
});

親コンポーネント

new Vue({
  el: '#app',
  template: `
    <div>
      <child-component @custom-click="handleClick"></child-component>
    </div>
  `,
  methods: {
    handleClick() {
      alert('カスタムイベントがキャッチされました');
    }
  }
});

ポイント

子コンポーネントでv-onを設定して、そのイベントをthis.$emitで親コンポーネントに渡す時は、nativeは不要になる。