為什麼Vue 3子元件會觸發兩次焦點事件？

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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