【VUE复习·2】@click 之事件处理与函数（可传参）；@click 阻止事件冒泡应用场景；@click 多修饰符应用场景（高级）

总览

1.“事件处理”是什么
2.@click 函数参数传递应用
3.@click 阻止事件冒泡应用场景
4.@click 多修饰符应用场景（高级）

一、“事件处理”是什么

1.概念

我们在和页面进行交互时，进行点击或滑动或其他动作时，我们操作的是 DOM 元素。VUE 需要知道在我们进行 xx操作 时，需要对数据进行哪些处理。当我们进行了操作，就触发了一个事件，VUE 会调用相应的函数来响应我们的操作。

2.示例代码

二、@click 函数参数传递应用

1.传参的作用

假如我们想要点击“删除”按钮，删掉学生表格里面其中一行的数据。这个时候我们要取到此条数据的ID，就需要将此行数据的ID传给函数。

2.示例代码

在代码中，使用了 $event 来传递事件，让我们能够使用鼠标和键盘来控制这个函数。具体的控制方法请参考 JavaScript 用法。

三、@click 阻止事件冒泡应用场景

1.这东西用在哪儿？

1.1 我们现在有一个 div 标签（蓝色框）里装着其他的 div 标签（button）。无论我们点击哪个，都能够触发我们想要触发的事件。

1.2 如果我们这样写：

1.3 那么，在点击 div（蓝色框）时，会触发 1 次 showInfo 函数。但是，如果我们点击的是 div（button）时，会触发 2 次 showInfo 函数！这可不是我们想要的效果。发生这种情况的原因是，在其他标签内的标签事件默认会引发 “事件冒泡”。

因此，如果我们想要达到 无论点击 div（蓝色框）还是 div（button）都只触发一次 showInfo 函数，那么就要像这样写（将 @click 变为 @click.stop）来阻止内部标签事件的冒泡：

三、@click 多修饰符应用场景（高级）

1.这东西用在哪儿？

1.1 我们将 @click 放在超链接 a 标签上，此时如果我们只阻止冒泡，那么它将会跳转走。如果我们想要让 a 标签达到 “只执行函数，且不事件冒泡，也不跳转页面” 的效果，那么应该这样写：

1.2 能看到，上面的写法中，我们连续了多个修饰符：.stop 用来阻止事件冒泡，.prevent 用来阻止标签的默认事件（禁止点击超链接发生的自动跳转）。