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

Question

在 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 来访问捕获事件的组件而不是定义模板的组件？

Answer 1

尝试使用内联函数并在不定义 ref 的情况下使用目标模糊方法：

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

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

它的灵感来自 this