Vue.js - 什么是 self 修饰符答案

【问题标题】：Vue.js - What is the self modifierVue.js - 什么是 self 修饰符
【发布时间】：2017-03-13 12:44:00
【问题描述】：

我正在学习 Vue.js。目前，我正在尝试了解事件。在 Vue 中，有Event Modifiers。除了 self 修饰符之外，我了解所有这些的目的。 self 修饰符是什么？看起来stop 修饰符与self 做同样的事情。我什么时候使用self？

感谢您的帮助。我觉得我一定是误会了什么。我只是看不到self 的目的。

【问题讨论】：

标签： events vue.js

【解决方案1】：

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

这是一个示例fiddle。

尝试从父 div 的单击事件修饰符中删除 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 不会调用父处理程序。

【讨论】：

【解决方案2】：

让我们解释一下区别。

<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，你会得到输出：

child
root

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

如果你删除 self：

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

然后点击child，你会得到输出：

child
parent
root

如果添加停止：

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

然后点击child，你会得到输出：

child
parent

你不会得到root，因为stop取消事件冒泡(event.stopPropagation)。

如果你会使用 self 它不会停止冒泡！

【讨论】：

【解决方案3】：

正如docs 所说：

仅当 event.target 是元素本身时才触发处理程序

即不是来自子元素

所以如果你想捕获一个事件，它不是从子组件的任何地方触发的，而是当点击整个组件时，你可以使用这个修饰符。

【讨论】：