Cuando disparo un evento de focus desde un campo de entrada de nivel superior en Vue 3:
<input @focus="$emit('focus')">... el evento se activa una vez cuando el campo de entrada está enfocado (como era de esperar).
Sin embargo, cuando coloca este mismo campo de entrada en un componente secundario y lo enfoca:
<InputField @focus="$emit('focus')" />...el evento se dispara dos veces.
Consulte https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/components/HelloWorld.vue
¿Pueden ayudarme a entender por qué sucede esto? ¡Gracias!
Por lo tanto, no debe colocar un evento de enfoque en el componente secundario, y también en el campo de input , ya que el componente secundario ya vinculará su evento de focus a la input , por lo que el evento de enfoque se llamará dos veces, ya que la input es la elemento raíz.
Simplemente eliminar el evento de enfoque de la input resolverá el problema.
https://stackblitz.com/edit/vue-676vsb?file=src/components/InputField.vue