在vue中使用.stop阻止单击事件继续传播

一、vue的事件修饰符

为了不在方法中处理DOM事件细节，vue中提供6个事件修饰符。分别是：

• .stop
• .prevent
• .capture
• .self
• .once（已弃用）
• .passive

二、使用.stop阻止点击事件的继续传播

原有代码：

<div class="content" @click="toggleList()">
    <div class="content-right" @click="pay()">
    </div>
</div>

（将先执行pay方法，再执行toggleList方法）

改进后代码：

<div class="content" @click="toggleList()">
    <div class="content-right" @click.stop="pay()">
    </div>
</div>

（只执行pay方法）