为什么Vue 3子组件会触发两次焦点事件?
P粉005134685
P粉005134685 2024-01-02 09:44:07
[Vue.js讨论组]

当我从 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粉005134685
P粉005134685

全部回复(1)
P粉191323236

因此,您不应该将 focus 事件放在子组件中,也不应该放在 input 字段中,因为子组件已经绑定了其 focus 事件到 input ,因此 focus 事件将被调用两次,因为 input 是根元素。

只需从输入中删除焦点事件即可解决问题。

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号