vue事件修饰符

一个div内部有button按钮
当点击按钮时 先执行按钮对应的事件 通过冒泡被动触发外部div对应的事件 再执行外部div对应的事件

- 当使用事件修饰符 .stop 会阻止冒泡事件** 即点击内部的button 执行对应事件后 会阻止外部事件的发生**

    <div class="inner" v-on:click="divHandler">
            <input type="button" value="内部的button" @click.stop='btnHandler'>
        </div>

• 使用 .prevent 阻止默认行为

<a href="http://www.baidu.com" @click.prevent="linkHandler">有问题，先去百度</a>

会执行事件对应的函数 但不会跳转页面

- 使用 .capture 捕获触发事件 （捕获最外部的元素对应的事件 依次向内执行）
.capture写在需要捕获的事件对应的元素上

点击内部button时 先执行外部div对应的事件 再执行内部元素对应的事件

  <div class="inner" v-on:click.capture="divHandler">
            <input type="button" value="内部的button" @click.stop='btnHandler'>
        </div>

• 事件修饰符 .self 只有当点击元素本身时 才会触发事件处理函数

   <div class="inner" v-on:click.self="divHandler">
            <input type="button" value="内部的button" @click.stop='btnHandler'>
        </div>