Zenn
🐸

Vue3での@click（from v.2）

2021/04/29に公開
Vue.js
Tips
memo
tech

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

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

解決したやりかた。

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

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

参考：

v-on.native modifier removed

Discussion