Question

我正在学习Vue.js.目前，我正在努力了解事件。在Vue中，有Event Modifiers。我理解除了self修饰符之外的所有目的。什么是self修饰符？似乎stop修饰符与self的作用相同。我何时会使用self？

感谢您的帮助。我觉得我必须误解一些事情。我只是没有看到self的目的。

Answer 1

如果父节点和子节点注册了相同类型的事件，那么当该类型事件调度时，将调用父节点和子节点的处理程序。

以下是fiddle示例。

尝试从父div的click事件修饰符中删除self，然后单击子div。

首先调用子处理程序。

调用父处理程序。

<div class="parent" v-on:click="log('from parent')">
  Parent
  <div class="child" v-on:click="log('from child')">
    Child
  </div>
</div>

如果您放回self修饰符并单击子div则不会调用父处理程序。

Answer 2

正如docs所说：

如果event.target是元素本身，则只触发处理程序

即。不是来自儿童元素

因此，如果您想捕获一个事件，该事件不是从子组件中的任何位置触发的，而是在单击整个组件时，您可以使用此修饰符。

Answer 3

让我解释一下。

<div id="app">
    <div class="root" v-on:click="log('root')">root
        <div class="parent" v-on:click.self="log('parent')">Parent
            <div class="child" v-on:click="log('child')">Child
            </div>
        </div>
    </div>
</div>

您了解事件阶段吗？

Capture (event.eventPhase = 1)
Target (event.eventPhase = 2)
Bubbling (event.eventPhase = 3)

默认情况下，如果为元素添加事件侦听器，它将以冒泡模式工作。

如果您在示例中点击子，您将获得输出：

child
root

Modificator self 说：'如果用户点击我（我的区域或边框），请触发处理程序'

如果您移除自我：

<div class="parent" v-on:click="log('parent')">

然后点击孩子，您将获得输出：

child
parent
root

如果您添加停止：

<div class="parent" v-on:click.stop="log('parent')">

然后点击孩子，您将获得输出：

child
parent

您不会获得 root ，因为停止取消事件冒泡（event.stopPropagation）。

如果您使用自我，它不会停止冒泡！

Vue.js - 什么是自修饰符

3 个答案: