vue自定义表单组件处理blur事件的关键是明确事件不冒泡特性，需在内部原生元素触发blur时手动$emit('blur')以透传；blur默认不冒泡，focusout才冒泡；拦截场景应通过relatedtarget判断失焦去向并用标志位控制逻辑。
Vue 自定义表单组件中处理焦点失焦事件（blur）的关键，在于明确事件捕获路径、避免意外冒泡干扰父级逻辑，同时确保组件自身能正确响应失焦行为（比如校验、状态更新）。核心不是阻止所有冒泡，而是按需控制——该透传的透传，该拦截的拦截，该主动触发的主动触发。
blur 事件默认不冒泡，但 focusout 会
这是最容易混淆的一点：blur 和 focus 是非冒泡事件（仅在目标元素触发），而 focusout 和 focusin 是冒泡版本。Vue 模板中用 @blur 绑定的正是原生 blur，它不会向上冒泡到父元素。如果你发现 blur “冒泡”了，大概率是：
- 误用了
@focusout（它天然冒泡） - 父组件监听了 document 或 body 的全局 focusout，并做了统一处理
- 自定义组件内部手动调用了
$emit('blur')并未加判断，导致重复触发
在封装输入类组件时主动 emit blur 事件
为保持与原生 input 行为一致，建议在内部原生 input 触发 blur 时，手动 $emit('blur', event)。这样外部使用者可统一用 @blur 监听，无需关心实现细节：
<template><input ref="inputRef" :value="modelValue"> /> </template>
注意：不要直接在根元素上写 @blur 并期望它自动冒泡到组件外——因为组件根元素不是原生 input，blur 不会自动触发；必须由内部真实可聚焦元素（如 input、textarea）触发后手动 emit。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章