Vue 中阻止冒泡和默认事件

使用原生的方式来阻止冒泡和默认事件很多人都知道了，而 Vue 虽然是数据驱动的 MVVM 框架，但是在项目需要的时候仍然要阻止冒泡和默认事件。一般的做法比如

<div>
  <div @click="show($event)"></div>
</div>

// 这里简写了
methods: {
  show (event) {
    // 阻止冒泡
    event.stopPropagation();
    // 阻止默认事件
    event.preventDefault();
  }
}

Vue 提供了更加方便的写法来实现：

<!-- 阻止冒泡 -->
<div>
  <div @click.stop="show()"></div>
</div>

<!-- 阻止默认事件 -->
<div>
  <div @click.prevent="show()"></div>
</div>

更多的玩法等待挖掘…