详细 事件冒泡与取消默认事件 请跳转至 ☞
http://blog.csdn.net/qq940853667/article/details/77151701
以下是常用的事件,跟着代码写就好了
<template>
<div>
<h1>事件修饰符</h1>
<!-- 父元素不捕获子元素的事件 -->
<div class="bigBox" @click.self="bigClick">
<div class="smallBox" @click="smallClick"></div>
</div>
<!-- 子元素不冒泡 -->
<div class="bigBox" @click="bigClick">
<div class="smallBox" @click.stop="smallClick"></div>
</div>
<!-- 不触发浏览器的默认事件,比如 a标签的默认事件的跳转 -->
<div class="bigBox" @click.prevent="bigClick">
<div class="smallBox" @click="smallClick"></div>
</div>
<!-- .once 该元素只能点击一次,第二次点就无效了 -->
<div class="bigBox" @click.once="bigClick">
<div class="smallBox" @click="smallClick"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
bigClick () {
console.log('big')
},
smallClick () {
console.log('small')
}
}
}
</script>