Vue3での@click(from v.2)

1 min read読了の目安(約600字

Vueのv.2プロジェクトを3に移行しているときに出会った事象です。
emit('click')を実行すると親側で2回呼ばれる現象に遭遇。

<!-- child -->
<div @click="onClick"></div>
···
methods: {
  onClick() {
    emit('click')
  }
}
<!-- parent -->
<child @click="onClick" />
···
methods: {
  onClick() {
    // ここが2回呼ばれる
  }
}

解決したやりかた。

emitsを書く。
@click.nativeのnativeが廃止されたようで、デフォルトでnativeイベントを拾うようになったのが影響しているようです。ですので、明示的にclickをしていすると、問題なく動作するようになりました。

<!-- child -->
<div @click="onClick"></div>
···
emits: ['click']
methods: {
  onClick() {
    emit('click')
  }
}
<!-- parent -->
変更なし

参考:

v-on.native modifier removed