vue 事件处理函数的参数问题 ev的指向问题

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

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

< 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=""

},

这样就可以了，可以同时获取传递的参数，还能获取事件对象；