Pourquoi le composant enfant de Vue 3 déclenche-t-il deux fois l'événement focus ?

Question

Lorsque je déclenche l'événement focus à partir d'un champ de saisie de niveau supérieur dans Vue 3 :

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

...l'événement est déclenché une fois lorsque le champ de saisie est focalisé (comme je m'y attendais).

Mais lorsque vous placez le même champ de saisie dans un composant enfant et que vous le concentrez :

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

...L'événement est déclenché deux fois.

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

Pouvez-vous m'aider à comprendre pourquoi cela se produit ? Merci!

Answer 1

Vous ne devez donc pas mettre l'événement focus dans un composant enfant, ni input 字段中，因为子组件已经绑定了其 focus 事件到 input ，因此 focus 事件将被调用两次，因为 input qui est l'élément racine.

Supprimez simplement l'événement focus de 输入 et le problème sera résolu.

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