Vue事件修饰符可防止vs.停止

Question

在阅读有关事件的Vue文档时，他们提到了事件修饰符，例如“阻止”或“停止”。他们在停车时提到：<!-- the click event's propagation will be stopped -->。我假设这将阻止事件起泡。那怎么办prevent？它到底是做什么的？我假设它将阻止事件触发两次（例如，双击）。这些假设正确吗？我只是在网上找不到更多特定信息。

我读到的是：

• https://vuejs.org/v2/guide/events.html
• 如何防止/停止指令（vue 2.x）中默认事件（click）的传播

Answer 1

.prevent或者event.preventDefault()-它停止了浏览器的默认行为（A例子是重载，当你打<button type="submit">的<form>）

.stop或event.stopPropagation()–阻止事件传播（或“冒泡”）DOM

.once -该事件将最多触发一次

Answer 2

这是 VueJs 2 中的一个实际示例：

var stopEx = new Vue({
    el: '#stop-example',
    methods: {
        elClick: function(event) {
            alert("Click from "+event.target.tagName+"\nCurrent Target: "+event.currentTarget.tagName);
        }
    }
})

#stop-example > div {
        max-width: 300px;
        min-height: 150px;
        border: 2px solid black;
    }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="stop-example">
    <h3>without stop propagation</h3>
    <div @click="elClick($event)">
        <button @click="elClick($event)">Click Me</button>
    </div>
    <h3>with stop propagation</h3>
    <div @click="elClick($event)">
        <button @click.stop="elClick($event)">Click Me</button>
    </div>
</div>

下面是它的工作原理
在第一个 div 元素上，(div) 元素的 (click) 事件由 (div) 和 (div) 的子元素处理，因为我们没有停止传播。
因此，一旦单击按钮，首先会触发按钮的单击事件，然后通过移动按钮的祖先来完成冒泡。
target 是处理事件的元素，而 currentTarget 可以是处理事件的元素或该元素的祖先。
因此，当您单击第一个 (div) 上的按钮时，由于处理父级的单击事件，单击事件会触发两次。