當我從 Vue 3 中的頂級輸入欄位觸發 focus
事件:
<input @focus="$emit('focus')">
...當輸入欄位對焦時,事件會被觸發一次(如我所期望的)。
但是,當您將相同的輸入欄位放入子元件並聚焦它時:
<InputField @focus="$emit('focus')" />
...該事件被觸發兩次。
請參考 https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/components/HelloWorld.vue
您能幫我理解為什麼會發生這種情況嗎?謝謝!
因此,您不應該將focus 事件放在子元件中,也不應該放在
input
欄位中,因為子元件已經綁定了其focus
事件到input
,因此focus 事件將會被呼叫兩次,因為input
是根元素。只需從
輸入
中刪除焦點事件即可解決問題。https://stackblitz.com/edit/vue -676vsb?file=src/components/InputField.vue