為什麼Vue 3子元件會觸發兩次焦點事件?
P粉005134685
P粉005134685 2024-01-02 09:44:07
0
1
504

當我從 Vue 3 中的頂級輸入欄位觸發 focus 事件:

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

...當輸入欄位對焦時,事件會被觸發一次(如我所期望的)。

但是,當您將相同的輸入欄位放入子元件並聚焦它時:

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

...該事件被觸發兩次。

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

您能幫我理解為什麼會發生這種情況嗎?謝謝!

P粉005134685
P粉005134685

全部回覆(1)
P粉191323236

因此,您不應該將focus 事件放在子元件中,也不應該放在input 欄位中,因為子元件已經綁定了其focus 事件到input ,因此focus 事件將會被呼叫兩次,因為input 是根元素。

只需從輸入中刪除焦點事件即可解決問題。

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板