Vue 3 子コンポーネントが focus イベントを 2 回トリガーするのはなぜですか?

Question

Vue 3 の最上位入力フィールドから focus イベントをトリガーすると:

リーリー

...入力フィールドがフォーカスされているときに (予想どおり) イベントが 1 回発生します。

しかし、同じ入力フィールドを子コンポーネントに配置してフォーカスすると:

リーリー

...イベントは 2 回トリガーされます。

https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/components/HelloWorld.vueを参照してください

なぜこのようなことが起こっているのか理解させていただけますか?ありがとう！

Answer 1

したがって、子コンポーネントは既にその focus イベントを input にバインドしているため、子コンポーネントや input フィールドに focus イベントを配置しないでください。 、input がルート要素であるため、focus イベントは 2 回呼び出されます。

入力 からフォーカス イベントを削除するだけで問題は解決します。

https://stackblitz.com/edit/vue -676vsb?file=src/components/InputField.vue