Vue.js-什么是自我修饰符

Question

我正在学习Vue.js。目前，我正在尝试了解事件。在Vue中，有Event Modifiers。我理解除self修饰符以外的所有对象。什么是self修饰符？似乎stop修饰符的作用与self。我self什么时候使用？

感谢您的任何帮助。我觉得我必须误会一些东西。我只是看不到的目的self。

Answer 1

让我解释一下差异。

<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：

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

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

child
parent
root 

如果添加stop：

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

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

child
parent

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

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

Answer 2

如果父节点和子节点注册了相同类型的事件，则在分派该类型事件时，将调用父节点和子节点的处理程序。

这是一个小提琴的例子。

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

1. 首先，调用子处理程序。

2. 父处理程序被调用。

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

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