为什么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