Vue3子组件中focus事件为何触发两次？

这个现象的核心原因是Vue3对组件事件绑定的处理逻辑，具体如下：

• 子组件内部的<input @focus="$emit('focus')"会在输入框获得焦点时，主动触发一次自定义的focus事件，父组件监听该自定义事件，执行一次$emit('focus')。
• 由于子组件没有在emits选项中声明focus事件，Vue会默认将父组件中<InputField @focus="...">的事件绑定，挂载到子组件的根DOM元素（也就是内部的input）上，监听原生focusin事件（因为原生focus事件不冒泡，Vue用focusin来实现事件的冒泡捕获）。当输入框获得焦点时，原生focusin事件触发，父组件的回调会再执行一次。

两者叠加就导致了focus事件被触发两次。

解决方法 #

在子组件的emits选项中明确声明focus事件，告诉Vue这是一个自定义事件，它就不会再自动绑定原生DOM事件到根元素上了：

<script setup>
defineEmits(['focus'])
</script>

<template>
  <input @focus="$emit('focus')" />
</template>

内容的提问来源于stack exchange，提问作者mst101