当我从 Vue 3 中的顶级输入字段触发 focus
事件时:
<input @focus="$emit('focus')">
...当输入字段聚焦时,事件会被触发一次(正如我所期望的)。
但是,当您将相同的输入字段放入子组件并聚焦它时:
<InputField @focus="$emit('focus')" />
...该事件被触发两次。
请参阅 https://stackblitz.com/edit/vue-wjhche?devToolsHeight=33&file=src/components/HelloWorld.vue
您能帮我理解为什么会发生这种情况吗?谢谢!
P粉1913232362024-01-03 00:46:18
因此,您不应该将 focus 事件放在子组件中,也不应该放在 input
字段中,因为子组件已经绑定了其 focus
事件到 input
,因此 focus 事件将被调用两次,因为 input
是根元素。
只需从输入
中删除焦点事件即可解决问题。
https://stackblitz.com/edit/vue -676vsb?file=src/components/InputField.vue