Vue中的事件修饰符（附带实例）

在学习事件修饰符前，我们先回顾一下 DOM 事件的传递原理。

当我们在页面上触发一个单击事件时，事件会先从父组件依次传递到子组件，这一过程通常被形象地称为事件捕获。当事件传递到最上层的子组件时，还会逆向地再进行一轮传递，从子组件依次向下传递，这一过程被称为事件冒泡。我们在 Vue 中使用 @click 的方式绑定事件的冒泡阶段，即从子组件传递到父组件的这一过程。

这些概念可能听起来比较复杂，通过具体的例子来看就会直观很多。下面编写一个事件组件，示例代码如下：

<div @click="click1" style="border:solid red">
  外层
  <div @click="click2" style="border:solid red">
    中层
    <div @click="click3" style="border:solid red">
      单击
    </div>
  </div>
</div>

实现 3 个绑定的函数如下：

const click1 = () => console.log("外层");
const click2 = () => console.log("中层");
const click3 = () => console.log("内层");

运行上述代码，单击页面上最内层的元素，通过观察控制台的打印，可以看到事件函数的调用顺序如下：

内层
中层
外层

如果要监听捕获阶段的事件，就需要使用事件修饰符，事件修饰符 capture 可以将监听事件的时机设置为捕获阶段，示例代码如下：

<div @click.capture="click1" style="border:solid red">
  外层
  <div @click.capture="click2" style="border:solid red">
    中层
    <div @click.capture="click3" style="border:solid red">
      单击
    </div>
  </div>
</div>

再次运行代码，单击最内层的元素，可以看到控制台的打印效果如下：

外层
中层
内层

捕获事件触发的顺序刚好与冒泡事件相反。在实际应用中，我们可以根据具体的需求来选择要使用冒泡事件还是捕获事件。

理解事件的传递对于处理页面用户交互至关重要。然而，在很多场景下，我们可能不希望事件继续传递。例如，在某些情况下，我们希望当用户单击内层组件时，只触发该内层组件绑定的方法；单击外层组件时，只触发外层组件绑定的方法。这时，Vue 中一个非常重要的事件修饰符 stop 就派上用场了。

使用 stop 修饰符可以阻止事件继续冒泡到父组件。示例代码如下：

<div @click.stop="click1" style="border:solid red">
  外层
  <div @click.stop="click2" style="border:solid red">
    中层
    <div @click.stop="click3" style="border:solid red">
      单击
    </div>
  </div>
</div>

此时，在单击时，只有被单击的当前组件绑定的方法会被调用。

除 capture 和 stop 事件修饰符外，还有一些常用的修饰符，总体列举如下表所示：

表：常用的修饰符
事件修饰符	作用
stop	阻止事件传递
capture	监听捕获场景的事件
once	只触发一次事件
self	当事件对象的 target 属性是当前组件时才触发事件
prevent	禁止默认的事件
passive	不禁止默认的事件

需要注意，事件修饰符可以串联使用。例如下面的写法既能起到阻止事件传递的作用，又可以控制只触发一次事件：

<div @click.stop.once="click3" style="border:solid red">
  单击
</div>

Vue中的事件修饰符（附带实例）

相关文章