Vue中获取当前的元素

灰太狼 2021-09-18 10:50 522阅读 0赞

在开发中，我们可能会遇到这样的问题：文本框聚焦、元素点击等，然后操作事件中的dom或者它的其他父节点或兄弟节点，单独的话，可以用ref " 抽离 "出dom元素，然后通过 this.$ref获取，但是当有多个同样的元素需要实现同样的效果的话，ref就不能满足我们的需求，绑定同一个ref只会获取最后一个元素，有人会说可以通过循环然后使用this，但是这样就会涉及到this指向问题，如果使用箭头函数，this会指向vue， 而不是想要的那个dom元素，不使用箭头函数的话，就不能使用vue的数据，比如data中的返回值。

下面指出vue中比较实用的一种方法（请忽略代码不规范）：

**$event**

需求是：当我聚焦文本框，就把其中的默认值赋给它的上一个span，失焦后再把span的值赋给文本框，当文本框输入值后，就不再把span的值赋给文本框，即显示用户输入的值

我只需在聚焦和失焦的方法中传入参数 $event 即可

获取：

点击的元素：e.target

绑定事件的元素：e.currentTarget

// 新增数据源弹框的内容文本框聚焦
    AddContentFocus(e){
        // 当前文本框的默认值赋给上一个节点span
        e.target.previousElementSibling.innerHTML = e.target.placeholder;
        // 当前文本框的默认值为空
        e.target.placeholder = "";
    },
    
    // 新增数据源弹框的内容文本框失焦
    AddContentBlur(e){
        // 当前文本框的上一个节点span的值赋给当前文本框的默认值
        e.target.placeholder = e.target.previousElementSibling.innerHTML;
        // 如果文本框没输入新的值，就把上一个节点span的值为空
        if(e.target.value==""){
            e.target.previousElementSibling.innerHTML = "";
        }
    }

效果图：

![2019030909480268.gif][]

好了，以上就是获取当前事件源dom的方法。

如有问题，请指出，接受批评。

个人微信公众号：

![20200824121739413.png][]

[2019030909480268.gif]: /images/20210812/3a2be643dd8e4ec68635a41c716a2e2f.png
[20200824121739413.png]: /images/20210812/52fcfa3ff5b84270807c05f4a17c7338.png