Vue前端开发：事件对象参数

在执行事件处理方法中，有时需要传入事件对象这个参数，例如，通过事件对象阻止事件的冒泡现象和默认动作。向方法中传入事件对象非常简单，一种是方法中不传任何参数，定义声明后直接获取，另外一种是向方法中传入一个特殊的变量$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所示。