vue 事件处理函数的参数问题 ev的指向问题_vue methods调用方法传参 $even-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80028440

本文介绍Vue.js中如何使用事件绑定来处理用户输入，包括回车触发事件和点击按钮触发事件的具体实现方法，并解释了如何在事件处理器中正确接收事件对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前有说过这样一个例子，回车或者点击添加新的任务；

我们的处理方式是：绑定事件函数，然后进行相关处理；

<input 
              type="text" 
              placeholder="例如:下午三点召开工作会议 ;"
              v-on:keyup.enter="addThingEnter"
              v-model="todo"
         >
         <a href="#" v-on:click="addThingClick">立即添加</a>

new Vue({
    el:"#con",
    data:{
        info:list,
        todo:""
    },
    methods:{
        addThingEnter(event){
            this.info.push(
                {title:event.target.value}
                // {title:this.todo}
            );
            this.todo=""
        },
        addThingClick(){
            this.info.push(
                {title:this.$el.querySelector("input").value}
                // {title:this.todo}
            );
            this.todo=""
        }
    }
});

我们可以看出在定义的函数没有传递参数的时候，也就是这样写的时候：

v-on:keyup.enter="addThingEnter"

我们在methods 下面的函数中的event指向的是事件对象，也就是下面这样，可以获取相应的值：

event.target.value 是可以获取的；

下面在看看如果传递参数是什么情况，我们给之前绑定的函数传递了一个参数"abc"

<input 
              type="text" 
              placeholder="例如:下午三点召开工作会议 ;"
              v-on:keyup.enter="addThingEnter('abc')"
              v-model="todo"
         >

 addThingEnter(event){
            console.log(event)
            // this.info.push(
            //     {title:event.target.value}
            //     {title:this.todo}
            // );
            // this.todo=""
        },

这个时候可以看见输出的结果是我们的参数，而不是事件对象；event 的指向已经发生改变了；

但是如果我们还想获取这个事件对象怎么办呢？

那就再把事件对象作为参数传递进去：

 <input 
              type="text" 
              placeholder="例如:下午三点召开工作会议 ;"
              v-on:keyup.enter="addThingEnter('abc',$event)"
              v-model="todo"
         >

addThingEnter(data,event){
            console.log(event)
            console.log(data)
            // this.info.push(
            //     {title:event.target.value}
            //     {title:this.todo}
            // );
            // this.todo=""
        },