在执行事件处理方法中，有时需要传入事件对象这个参数，例如，通过事件对象阻止事件的冒泡现象和默认动作。向方法中传入事件对象非常简单，一种是方法中不传任何参数，定义声明后直接获取，另外一种是向方法中传入一个特殊的变量$event，也可以获取事件对象。接下来通过一个示例来演示传入事件对象的过程。
实例4-3 事件对象参数
1. 功能描述
新建一个组件，在模板中添加三个div元素，其中二个为父子包裹结构，并分别绑定单击事件，执行一个相同的事件处理方法，当点击子元素时，在第三个div元素中显示每次单击元素时的累加值 。
2. 实现代码
在项目components 文件夹的ch4子文件夹中，添加一个名为“EventObject”的.vue文件，在文件中加入如清单4-3所示代码。
代码清单4-3 EventObject.vue代码
<template><div class="action"><div class="a-parent" @click="todo"><div class="a-child" @click="todo"></div></div><div class="a-item">数量:{{ intNum }}</div></div>
</template><script>
export default {name: "EventObject",data() {return {intNum: 0,};},methods: {todo() {this.intNum++;}}
};
</script>
<style scoped>
.action .a-item {margin: 10px 0;
}.action .a-parent {width: 100px;height: 100px;border: solid 1px #666;padding: 20px;
}.action .a-child {width: 100px;height: 100px;border: solid 1px #666;
}.action .a-item input {width: 80px;height: 32px;
}
</style>3. 页面效果
保存代码后，页面在Chrome浏览器下执行的页面效果如图4-3所示。
4. 源码分析
在上述示意图4-3中，由于存在事件的冒泡现象，当点击子元素时，同时也触发了父元素绑定的事件，因此，虽然是单击了一次子元素，但实际是执行两次相同的事件处理方法，所以，最终值显示为2。
为了解决这种事件冒泡现象，在Vue中，可以使用以下三种方法：
第1种，在现有代码基础之上，定义事件处理方法时，通过声明的方式，获取默认的事件对象，它是原生DOM事件对象，调用这个对象中的stopPropagation()方法就可以阻止冒泡现象的发生，修改代码如下所示：
todo(event) {event.stopPropagation();this.intNum++;}第2种，在元素触发事件调用方法时，将一个特殊的变量$event，作为事件对象参数传入方法中，此时方法中调用的事件对象，是元素在事件触发时真实传入的，因此，只需要修改元素绑定事件时的代码，代码修改如下所示：
<div class="a-child" @click="todo($event)"></div>
第3种，无论传参或不传参，都会修改事件处理方法，为了将DOM元素事件本身的特点与事件处理逻辑分离，在Vue中，也可以通过使用事件修饰符来完成事件冒泡的现象，即将调用事件时的写法修改成如下代码：
<div class="a-child" @click.stop="todo"></div>
在这3种方法中，前2种方法相对复杂，第3种是Vue中特有的写法，既简单，又高效，建议大家使用。无论用何种方法解决冒泡的现象，最终页面实现的效果将会如下图4-4所示。
