Vue中获取当前的元素

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

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

$event

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

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

获取：

点击的元素：e.target

绑定事件的元素：e.currentTarget

<div class="addAlert-content">
    <span class="addAlert-DbManagement-span"></span>
    <input type="text" placeholder="请输入数据源名称 *" class="addAlert-DbManagement" @focus="AddContentFocus($event)" @blur="AddContentBlur($event)" v-model="addTitle">
    <span class="addAlert-DbManagement-span"></span>
    <input type="text" placeholder="请输入主机号 *" class="addAlert-DbManagement" @focus="AddContentFocus($event)" @blur="AddContentBlur($event)" v-model="addHost">
    <span class="addAlert-DbManagement-span"></span>
    <input type="text" placeholder="请输入端口号 *" class="addAlert-DbManagement" @focus="AddContentFocus($event)" @blur="AddContentBlur($event)" v-model="addPort">
    <span class="addAlert-DbManagement-span"></span>
    <input type="text" placeholder="请输入账号 *" class="addAlert-DbManagement" @focus="AddContentFocus($event)" @blur="AddContentBlur($event)" v-model="addAccount">
    <span class="addAlert-DbManagement-span"></span>
    <input type="text" placeholder="请输入密码 *" class="addAlert-DbManagement" @focus="AddContentFocus($event)" @blur="AddContentBlur($event)" v-model="addPassword">
    <span class="addAlert-DbManagement-span"></span>
    <input type="text" placeholder="请输入数据库名称 *" class="addAlert-DbManagement" @focus="AddContentFocus($event)" @blur="AddContentBlur($event)" v-model="addDbName">
    <input type="button" value="确认添加" id="add" @click="addAlertSubmit">
</div>

// 新增数据源弹框的内容文本框聚焦
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 = "";
    }
}

效果图：

image

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

如有问题，请指出，接受批评。
个人微信公众号：

image.png