When I trigger the focus event from a top-level input field in Vue 3:
<input @focus="$emit('focus')">
...The event is fired once when the input field is focused (as I expected).
But when you put the same input field into a child component and focus it:
<InputField @focus="$emit('focus')" />
...The event is triggered twice.
See https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/components/HelloWorld.vue
Can you help me understand why this is happening? Thanks!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Therefore, you should not put the focus event in the child component, nor in the
inputfield, because the child component has already bound itsfocusevent toinput, so the focus event will be called twice becauseinputis the root element.Simply removing the focus event from the
inputwill solve the problem.https://stackblitz.com/edit/vue -676vsb?file=src/components/InputField.vue