🐸

Vue3での@click(from v.2)

1 min read

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

Discussion

ログインするとコメントできます