6、事件、事件对象、事件源对象

160 阅读1分钟
<template>
	<div class="home">
		<button  @click="setCount" >{{count}}</button>
		<div @click="setCount2(2,$event)" style="padding: 20px;border: solid 2px red;">
			<button   >{{count}}</button>
		</div>
	</div>
</template>

<script>
	export default {
		
		data() {
			return {
				count: 1,
			}
		},
		methods: {
			setCount(event) {
				this.count++
			},
			setCount2(num,event) {
				this.count+=num
				console.log(event.target);
				console.log(event.currentTarget);
			}
		}
	}
</script>

1、当事件绑定的函数没有传参数时,vue会自动把事件对象传给回调函数,

2、当事件绑定的函数有参数参数时,必须显示传事件对象$event。

3、event.target是触发事件源对象。

4、event.currentTarget是绑定事件回调函数的对象。