Vue中获取事件的event 对象（一）——不传参-默认event对象 & 传参数$event-可添加其他参数_vue3 $event

Vue中获取事件的event 对象（一）——不传参-默认event对象 & 传参数$event-可添加其他参数

方式一：默认获取

• 不填写时，默认第一个参数就是 event 对象。

1、只获取本身的值，在一般的回调函数中，都默认存在$event

<template>
<div id="demo">
    <button @click="onClick">按钮名称</button>
</div>
</template>
<script>
new Vue({
    el:'#demo',
    data:{

    },
    methods:{
        onClick(event){
            console.log(event.target.innerText);  // 按钮名称
        }
    }
});
    
    
export default {
    methods: {
        onClick(e) {
            console.log(e);
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

方式二：$event

• 必须是 $event 的写法，该参数位置可随意，也可放在第一个。

2、获取本身的值+参数的值，对比与上一个例子的不同。

<template>
<div id="demo">
    <button @click="onClick(word,$event)">按钮名称</button>
</div>
</template>

<script>
 new Vue({
     el:'#demo',
     data:{
         word:'我喜欢你，'
     },
     methods:{
         onClick(str,event){
             console.log(str+event.target.innerText);  // 我喜欢你，按钮名称
         }
     }
 });
    

export default {
    methods: {
        onClick(str, e) {
            console.log(str, e);
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

获取定义参数的值和当前button上的值。