Warum löst die untergeordnete Komponente von Vue 3 das Fokusereignis zweimal aus?

Question

Wenn ich das focus-Ereignis über ein Eingabefeld der obersten Ebene in Vue 3 auslöse:

<input @focus="$emit('focus')">

...das Ereignis wird einmal ausgelöst, wenn das Eingabefeld fokussiert ist (wie erwartet).

Aber wenn Sie dasselbe Eingabefeld in eine untergeordnete Komponente einfügen und es fokussieren:

<InputField @focus="$emit('focus')" />

...Das Ereignis wird zweimal ausgelöst.

Siehe https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/components/HelloWorld.vue

Können Sie mir helfen zu verstehen, warum das passiert? Danke!

Answer 1

因此，您不应该将 focus 事件放在子组件中，也不应该放在 input 字段中，因为子组件已经绑定了其 focus 事件到 input ，因此 focus 事件将被调用两次，因为 input 是根元素。

只需从输入中删除焦点事件即可解决问题。

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