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!
因此,您不應(yīng)該將 focus 事件放在子組件中,也不應(yīng)該放在 input
字段中,因為子組件已經(jīng)綁定了其 focus
事件到 input
,因此 focus 事件將被調(diào)用兩次,因為 input
是根元素。
只需從輸入
中刪除焦點事件即可解決問題。
https://stackblitz.com/edit/vue -676vsb?file=src/components/InputField.vue