Vue3中事件在emits选项声明时,监听器为何会从$attrs移除?
Vue 3 组件事件与
$attrs的核心规则 Vue 3 对组件事件的声明、透传逻辑做了明确调整:
- 支持通过
emits选项显式声明组件会触发的所有事件 - 移除了旧版本的
$listeners属性,原$listeners承载的事件监听器相关功能,全部合并到$attrs中统一管理
关于$attrs里的事件监听器访问,规则很清晰:
所有透传进来的事件监听器,都会自动加上on前缀做命名转换。比如父组件绑定的click事件,默认情况下你可以在组件内部通过$attrs.onClick直接拿到对应的回调函数。
这里有个非常容易踩的细节:一旦某个事件被你写在emits选项里做了显式声明,这个事件对应的监听器就会从$attrs中被移除,你没法再通过$attrs访问到对应的回调。
举个简单的场景方便理解:
如果你在子组件里通过defineEmits(['click'])声明了要触发click事件,那父组件传进来的@click回调就不会留在$attrs里,自然也不会跟着v-bind="$attrs"透传到子组件的根节点/指定节点上,只能通过emit('click')的方式触发对应回调。
内容的提问来源于stack exchange,提问作者Lars
相关产品推荐
相关产品推荐

