微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

从 vue3 中的 v-on 事件处理程序访问元素

如何解决从 vue3 中的 v-on 事件处理程序访问元素

在 vue 中,我经常需要访问组件的元素。例如这里在 element-plus 中,确保焦点被移除:

<el-button ref="btnLanza" @mouseleave="$refs.btnLanza.$el.blur()" @click="runLanza" round>Lanzar</el-button> 

在其他框架中,类似 on-mouseleave="this.blur()" 的东西就足够了,但在 vue this 中没有指向元素,所以我需要定义一个 ref 然后遍历 $refs ,只为这个小任务。

是否有替代 $this 来访问捕获事件的组件而不是定义模板的组件?

解决方法

尝试使用内联函数并使用目标模糊方法而不定义引用:

@mouseleave="($event)=>$event.target.blur()" 

或者只是@mouseleave="$event.target.blur()"

它的灵感来自this

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。