Warum löst die untergeordnete Komponente von Vue 3 das Fokusereignis zweimal aus?
P粉005134685
P粉005134685 2024-01-02 09:44:07
0
1
491

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!

P粉005134685
P粉005134685

Antworte allen(1)
P粉191323236

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

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

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage